JavaScript this绑定与this指向问题的解析

一、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 = {
  a: 2,
  foo:foo
}
let a = 1
obj.foo(); // 2

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

3、显式绑定

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

function foo(){
  console.log(this.a)
}
let obj = {
  a: 1
}
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 = {
  a: 1,
  foo: foo
}
let obj2 = {
  a: 2
}
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 都指向全局对象。

判断顺序

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

常见的指向问题

• 箭头函数没有自己的 this 指针（需要从执行上下文来进行判断）

三、改变 this 指向

有四种方式

• 变量保存 this：将 this 临时保存下来
• call()：使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
• bind()：会有一个返回值，返回值是一个拥有第一个函数作用域的新的函数体
• 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 是传递一个数组或者类数组对象的参数

到此这篇关于JavaScript this绑定与this指向问题的解析的文章就介绍到这了,更多相关JavaScript this绑定与this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！