深入理解JavaScript this绑定规则

this绑定规则

this在全局作用域下指向

• 全局作用域下的this指向window
• 如果给元素的事件行为绑定函数，那么函数中的this指向当前被绑定的那个元素
• 函数中的this，要看函数执行前有没有., 有.的话，点前面是谁，this就指向谁，如果没有点，指向window
• 自执行函数中的this永远指向window
• 定时器中函数的this指向window
• 构造函数中的this指向当前的实例
• call、apply、bind可以改变函数的this指向
• 箭头函数中没有this，如果输出this，就会输出箭头函数定义时所在的作用域中的this

this的指向和函数所处的位置无关，与函数被调用的方式有关

默认绑定

当函数是直接调用，而没有被绑定到某个对象上进行调用时，this指向window

const obj = {
	name: '张三',
  foo: function () {
    console.log(this)
  }
}
const fn = obj.foo
fn() // window

隐式绑定

通过某个对象进行调用

const obj1 = {
  name:'obj1',
  foo: function () {
    console.log(this)
  }
}

const obj2 = {
  name:'obj1',
  // 只是让foo指向0bj1.foo，但是并没有调用
  foo: obj1.foo
}

// foo函数是由obj2进行调用的
obj2.foo() // {name: 'obj1', foo: ƒ}

显式绑定

通过call()、apply()、bind()方法进行调用，明确的改变函数的this指向

function sum (num1, num2, num3) {
  console.log(num1 + num2 + num3, this);
}
sum.call('call', 1, 2, 3); // 6 String {'call'}
sum.apply('apply', [1, 2, 3]); // String {'apply'}
const fn = sum.bind('bind', 1, 2, 3);
fn(); // 6 String {'bind'}

默认绑定和显示绑定冲突时，显示绑定的优先级更高

new绑定

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

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

   1. 在内存中创建一个新的空对象，如obj
   2. 对新创建的对象obj执行prototype连接（obj.__proto__ = 函数.prototype）
   3. 让this指向这个新的对象obj
   4. 执行构造函数里面的代码，给这个对象添加属性和方法
   5. 返回这个新对象obj（所以构造函数里面不需要return）

   function Person (name) {
     this.name = name
   }
   
   const person1 = new Person('张三');
   person1.name // 张三
   const person2 = new Person('李四');
   person2.name // 李四
   

绑定优先级

默认规则this绑定的优先级最低

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

function foo () {
  console.log(this);
}
const obj = {
  name: '张三',
  fn: foo.bind('bind')
}
obj.fn() // String {'bind'}

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

const obj = {
  name: '张三',
  foo: function () {
    console.log(this);
  }
}
var fn = new obj.foo(); // foo {}

new绑定优先级高于显示绑定（new绑定优先级最高）

function Foo () {
  console.log(this) // Foo {}
}
var bar = Foo.bind('bind')
var foo = new Foo()

• 注意new关键字无法和call()/apply()一起使用，因为new、call()、apply()都是直接调用函数

特殊情况的this

• 箭头函数：不遵循上述规则，this由外层作用域决定
• DOM事件处理函数：通常this指向触发事件的元素
• setTimeout/setInterval回调：在非严格模式下默认指向全局对象

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

最新评论