this

玩轉(zhuǎn)this的一些函數(shù)——bind、apply、call 的用法

• bind：fun.bind(thisArg[, arg1[, arg2[, ...]]])
bind()方法創(chuàng)建一個(gè)新的函數(shù)，當(dāng)函數(shù)被調(diào)用時(shí)，將其this值設(shè)定為bind的第一個(gè)參數(shù)。之后的參數(shù)數(shù)列作為參數(shù)傳遞給被調(diào)用函數(shù)。

• apply： fun.apply(thisArg,[argsArray])
apply()方法調(diào)用一個(gè)函數(shù)，使其具有一個(gè)指定的this值，以及作為一個(gè)數(shù)組(或類數(shù)組)提供的參數(shù)。在ES5開(kāi)始，只要有一個(gè)length屬性和[0...length)范圍內(nèi)的整數(shù)屬性，即可傳給apply來(lái)使用。

• call：fun.call(thisArg[, arg1[, arg2[, ...]]])
call()方法同樣是調(diào)用一個(gè)函數(shù)，使其具有指定的this值和提供的參數(shù)(列表)?？梢宰宑all()中的對(duì)象調(diào)用當(dāng)前對(duì)象所擁有的function。

call()與apply()的作用是類似的，只有一個(gè)區(qū)別： call()方法接受的是若干個(gè)參數(shù)的列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

一些練習(xí)題：

在沒(méi)有call、apply、bind 的情況下，this的值通常依賴于函數(shù)的調(diào)用者

• 1

var john = { 
 firstName: "John" 
}
function func() { 
 alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()    //彈出   John: hi!  因?yàn)楹瘮?shù)調(diào)用者是 對(duì)象john

• 2

func() 
function func() { 
  alert(this)
}
//申明提升，再調(diào)用函數(shù)，調(diào)用者為window，所以彈出window

• 3

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//先打印document，再打印window，因?yàn)榈谝粋€(gè)打印的調(diào)用者是document，而setTimeout的調(diào)用者通常是window。

• 4

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
//彈出John，使用call方法將函數(shù)的this值指向了john對(duì)象。

• 5

var module= {
  bind: function(){//添加   _this = this
    $btn.on('click', function(){
      console.log(this) //this指向的是$btn，所以下面的調(diào)用是無(wú)法成功的
      this.showMsg();//_this.showMsg()
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

原型鏈

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();

Preson是構(gòu)造函數(shù)，也是一個(gè)對(duì)象。
p為Person的實(shí)例，擁有Person原型鏈上的屬性和方法。
p.__proto__指向Person.prototype。
Person中的prototype中的__proto__指向的是Object()的prototype，其中有toString等方法，所以p可以調(diào)用toString方法。

function instanceof(obj, fn) {
  var objProto = obj.__proto__
  while (objProto) {
    if (objProto === fn.prototype) {
      return true
    }else{
      objProto = objProto.__proto__
    }
  }
  return false
}

小題目：對(duì)String做擴(kuò)展，實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符

String.prototype.getMostOften = function () {
  var target = {};
  this.split('').forEach(function (i) {
    target[i] ? target[i] += 1 : target[i] = 1;
  })
  console.log(target)
  var max = 0,
    maxKey = ''
  Object.keys(target).forEach(function (key) {
    if (target[key] > max) {
      max = target[key]
      maxKey = key
    }
    return maxKey
  }

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次

繼承

繼承有啥用：
1.子類擁有父類的屬性和方法，不需要重復(fù)寫代碼，也不需要更多的空間，修改時(shí)也只需修改一份代碼
2.可以重寫和擴(kuò)展父類的屬性和代碼，又不影響父類本身

繼承的一些小問(wèn)題：
1.下面兩種寫法有什么區(qū)別?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饑人谷', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);

方法一的printName是在父類自身里的一個(gè)方法，當(dāng)子類繼承時(shí)，將產(chǎn)生一個(gè)屬于子類自己的功能相同的新的printName。
方法二中的printName是存在于原型鏈中的一個(gè)方法，當(dāng)子類繼承時(shí)，由于同時(shí)繼承了prototype，所以子類也可以使用printName的方法。
方法二與方法一相比，法二可以節(jié)省部分內(nèi)存。

2.Object.create 有什么作用？兼容性如何？
Object.create() 方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象。

3.hasOwnProperty有什么作用？ 如何使用？
hasOwnProperty() 方法會(huì)返回一個(gè)布爾值，指示對(duì)象是否具有指定的屬性作為自身（不繼承）屬性。

var o = {
  a: 1;
  b: 2
}
o.hasOwnProperty("a")//true
o.hasOwnProperty("c")//false
o.hasOwnProperty("toString")//false

4.如下代碼中call的作用是什么？

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //這里的 call 有什么作用
    this.age = age;
}

在調(diào)用Male時(shí)，運(yùn)行到Person函數(shù)時(shí)，將Person的this 指定為 Male的this。并且將Male的 name和sex 作為參數(shù)傳給Person。

5.補(bǔ)全代碼，實(shí)現(xiàn)繼承

function Person(name, sex){
    this.name = name
    this.sex = sex
}

Person.prototype.printName = function(){
    console.log(this.name)
};    


function Male(name, sex, age){
   this.name = name
   this.sex = sex
   this.age = age
}

Male.prototype = Object.create(Person.prototype)
Male.prototype.getAge = function(){
    console.log(this.age)
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();