【JavaScript】this指向（call,aplly,bind）

重学JavaScript04----- this指向

---

前言

call、apply、bind都是改变this指向的方法，也叫显示绑定

那么this到底是怎么样的绑定规则呢？

• 绑定一：默认绑定；
• 绑定二：隐式绑定；
• 绑定三：显示绑定；
• 绑定四：new绑定；

规则一：默认绑定

独立函数调用：函数没有被绑定到某个对象上进行调用

function foo() {
	console.log(this)
}

foo()

规则二：隐式绑定

通过某个对象进行调用

function foo() {
  console.log(this)
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo() // obj对象

隐式绑定有一个前提条件：

• 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
• 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
• 正是通过这个引用，间接的将this绑定到了这个对象上；

规则三：显示绑定

JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）

bind、call、apply的区别

它们的异同点：

• 他们第一个参数是相同的（要指向的this对象），后面的参数，apply为数组，call和bind为参数列表；
• 这三个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。
• 在调用这个函数时，会将this绑定到这个传入的对象上。
• call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。

因为我们明确的绑定了this指向的对象，所以称之为 显示绑定。

通过call或者apply绑定this对象

显示绑定后，this就会明确的指向绑定的对象

function foo() {
  console.log("函数被调用了", this)
}

// 1.foo直接调用和call/apply调用的不同在于this绑定的不同
// foo直接调用指向的是全局对象(window)
foo() //函数被调用了 Window {window: Window, self: Window, document: document, name: "", location: Location, …}

var obj = {
  name: "obj"
}

// call/apply是可以指定this的绑定对象
foo.call(obj)//函数被调用了 {name: "obj"}
foo.apply(obj)//函数被调用了 {name: "obj"}
foo.apply("aaaa")//函数被调用了 String {"aaaa"}

通过bind绑定this对象

如果我们希望一个函数总是显示的绑定到一个对象上，可以使用bind进行绑定

function foo() {
  console.log(this)
}

// 默认绑定和显示绑定bind冲突: 优先级(显示绑定)

var newFoo = foo.bind("aaa")

newFoo() //String {"aaa"}
newFoo()
newFoo()
newFoo()
newFoo()
newFoo()

var bar = foo
console.log(bar === foo)//true
console.log(newFoo === foo)//false

手写实现apply、call、bind

1、call函数的实现

// 给所有的函数的原型添加一个mycall的方法
Function.prototype.mycall = function(thisArg, ...args) {
  // 1.获取需要被执行的函数
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.调用需要被执行的函数
  thisArg.fn = fn
  var result = thisArg.fn(...args)
  delete thisArg.fn

  // 4.将最终的结果返回出去
  return result
}

2、apply函数的实现

Function.prototype.myapply = function(thisArg, argArray) {
  // 1.获取到要执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn

  var result
  argArray = argArray || []

  result = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}

3、bind函数的实现

因为bind不是立即调用的，所以return一个proxyFn让使用者自己调用即可
proxyFn调用时也会收集用户输入的参数，并把收集的传参与调用mybind函数绑定时的参数合并

Function.prototype.mybind = function(thisArg, ...argArray) {
  // 1.获取到真实需要调用的函数
  var fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
  }

  return proxyFn
}

规则四：new绑定

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。

使用new关键字来调用函数是，会执行如下的操作：

• 1.创建一个全新的对象；
• 2.这个新对象会被执行prototype连接；
• 3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
• 4.如果函数没有返回其他对象，表达式会返回这个新对象；

// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
// this = 创建出来的对象
// 这个绑定过程就是new 绑定

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

var p1 = new Person("死侍", 29)
console.log(p1.name, p1.age)

var p2 = new Person("金刚狼", 30)
console.log(p2.name, p2.age)

特殊情况

1、忽略显示绑定

如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则

function foo() {
  console.log(this)
}

foo.apply("abc")
foo.apply({})

// apply/call/bind: 当传入null/undefined时, 自动将this绑定成全局对象
foo.apply(null)
foo.apply(undefined)

var bar = foo.bind(null)
bar()

2、间接函数引用

另外一种情况，创建一个函数的 间接引用，这种情况使用默认绑定规则。

var obj1 = {
  name: "obj1",
  foo: function() {
    console.log(this)
  }
}

var obj2 = {
  name: "obj2"
};

(obj2.bar = obj1.foo)() //Window {window: Window, self: Window, document: document, name: "", location: Location, …}

3、ES6箭头函数

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

var name = "死侍"

var foo = () => {
  console.log(this)
}

foo() //Window {window: Window, self: Window, document: document, name: "死侍", location: Location, …}

总结：规则优先级

如果一个函数调用位置应用了多条规则，优先级谁更高呢？

1.默认规则的优先级最低

• 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this

2.显示绑定优先级高于隐式绑定

var obj = {
  name: "obj",
  foo: function() {
    console.log(this)
  }
}

obj.foo() //{name: "obj", foo: ?}

// 1.call/apply的显示绑定高于隐式绑定
obj.foo.apply('abc') // String {"abc"}
obj.foo.call('abc') // String {"abc"}

// 2.bind的优先级高于隐式绑定
var bar = obj.foo.bind("abc") 
bar() // String {"abc"}

3.new绑定优先级高于隐式绑定

var obj = {
  name: "obj",
  foo: function() {
    console.log(this)
  }
}

// new的优先级高于隐式绑定
var f = new obj.foo()

4.new绑定优先级高于bind

• new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
• new绑定可以和bind一起使用，new绑定优先级更高