全面解析 this 绑定与 this 指向问题

1,082 阅读5分钟

一、this 绑定

怎么理解 this?

其实 this 就是一个指针,它指示的就是当前的一个执行环境,可以用来对当前执行环境进行一些操作。

MDN 解释:在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定)。this 不能在执行期间被赋值,并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值,而不用考虑函数如何被调用的。ES2015 引入了箭头函数,箭头函数不提供自身的 this 绑定(this 的值将保持为闭合词法上下文的值)。

this 是如何绑定的?

每个函数的 this 是在调用时被绑定的,完全取决于函数的调用位置。我们找到函数的调用位置,然后运用以下四种绑定规则来判断函数的 this 指向。

1、默认绑定

函数的 this 会默认绑定到全局对象 window 上,如果在严格模式中,this 绑定到 undefined。

function foo (){
  console.log(this.a)
}
let a = 1
foo() // 1

2、隐式绑定

调用位置是否有上下文对象,或者被某个对象拥有或包含。

function foo(){
  console.log(this.a)
}
let obj = {
  a2,
  foo:foo
}
let a = 1
obj.foo(); // 2

function foo(){
  console.log(this.a)
}
let obj1 = {
  a2,
  foo: foo
}
let obj2 = {
  a3,
  obj1: obj1
}
let a = 1
obj2.obj1.foo(); // 2

3、显式绑定

直接改变 this 指向,绑定到另一个执行环境

function foo(){
  console.log(this.a)
}
let obj = {
  a1
}
foo.call(obj)

4、new 绑定

new 出来的函数 this 绑定的是新创建的对象

function Foo(a){
  this.a = a
}
let bar = new Foo(2)
console.log(bar.a// 2

this 绑定优先级

默认绑定的优先级是最低的

new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

1、显示绑定 VS 隐式绑定

function foo(){
  console.log(this.a)
}
let obj1 = {
  a1,
  foo: foo
}
let obj2 = {
  a2
}
console.log(obj1.foo()) // 1
obj1.foo.call(obj2) // 2

通过以上代码我们可以看到 显式绑定 的优先级高于 隐式绑定

2、显示绑定 VS new 绑定

function foo(a){
  this.a = a
}
let obj1 = {
  foo
}
let bar = foo.bind(obj1)
bar(2)
console.log(obj1.a// 2
let bar2 = new bar(3)
console.log(obj1.a// 2
console.log(bar2.a// 3

new 修改了显示绑定 调用 bar 中的 this,所以 new 绑定的优先级高于显式绑定

二、this 指向

判断准则

第一准则:this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。(不包含箭头函数)

第二准则:无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象

判断顺序

  1. 函数是否在 new 中调用,如果是的话 this 绑定的是新创建的对象;
  2. 函数是否通过 call、apply、bind 的方式调用,如果是的话 this 绑定的是指定的对象;
  3. 函数是否在某个上下文中被调用,如果是的话 this 绑定的是函数调用的上下文;
  4. 除此之外 this 绑定的就是全局对象 在严格模式下绑定的是 undefined。

常见的指向问题

  1. 箭头函数没有自己的 this 指针(需要从执行上下文来进行判断)

三、改变 this 指向

有四种方式

  1. 变量保存 this:将 this 临时保存下来
  2. call():使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
  3. bind():会有一个返回值,返回值是一个拥有第一个函数作用域的新的函数体
  4. apply():调用一个具有给定 this 值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数。

变量保存 this

var _this = window;
var obj = {
    name:"张三",
    show:function(){
        console.log(this//obj
        console.log(_this) // window
    }
}
obj.show()

call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

函数名称.bind(参数1,参数2,a,b,c.....)
    参数1:当前函数的作用域
    参数2:需要传递的参数,参数是一个一个传
function fn(a,b){
    console.log(this,a,b)
}
document.onclick = functioin(){
    fn.call(document,1,2)
}

可以使用 call 来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。

function Product(name, price) {
  this.name = name;
  this.price = price;
}
function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}
function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}
var cheese = new Food('feta'5);
var fun = new Toy('robot'40);

bind

bind 创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

特性就是会有一个返回值,返回值是一个拥有第一个函数作用域的新的函数体

函数名称.bind(参数1,参数2.....)() // 必须调用一下
    参数1:当前函数的作用域
    参数2:需要传递的参数
var obj = {
    name:"张三",
    show:function(val){
        console.log(this//obj  没有修改前
        console.log(this,1// document 1     修改后
    }
}
obj.show().bind(document,1)()

MDN:ECMAScript 5 引入了 Function.prototype.bind()。调用 f.bind(someObject) 会创建一个与 f 具有相同函数体和作用域的函数,但是在这个新函数中,this 将永久地被绑定到了 bind 的第一个参数,无论这个函数是如何被调用的。

apply

apply() 方法调用一个具有给定 this 值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数。

函数名称.bind(参数1,[参数2,a,b,c.....])
    参数1:当前函数的作用域
    参数2:需要传递的参数   数组
function fn(a,b,c){
    console.log(this,a,b,c)
}
document.onclick = functioin(){
    fn.apply(document,[1,2,3])
}

call ,apply ,bind 三者的区别

不同点:

  • bind 会有一个返回值,返回值是函数体,因此需要加上 () 才能调用 
  • call,apply 是没有返回值的,当改变函数 this 指向的时候,函数就会执行,不需要加 () 调用
  • call 传递参数的时候是一个一个传递的
  • apply 是传递一个数组或者类数组对象的参数