本文共 2120 字，大约阅读时间需要 7 分钟。

this指向

this是函数体内的一个关键字, 不同函数和不同的环境都会影响this的值 

注意: 严格模式下, this无法指向window, 并且 this变量无法重新赋值

this绑定规则

1. 默认绑定: 看调用者

• 案例1: 按钮事件中this的值

再点下function btn2(){ // 标签上绑定的事件也是在window环境    console.log(this); // 默认由window调用}

• 案例2: 默认window调用方法

function fnOne(){    console.log(this); // window}fnOne(); // 其实是window.fnOne(), 所以调用者是window

• 案例3: 定时器回调函数

setTimeout(function(){ // setTimeout运行在Window的环境下    console.log(this);  // 默认指向window}, 0);

• 案例4: 匿名自调用函数

(function(){ // 匿名自调用函数运行在window环境下    console.log(this); // 代码默认前面都有个window.调用, 所以this默认指向window})();

2. 隐式绑定: 看调用者

• 案例1: JS获取标签.事件函数

点我document.getElementById("btn").onclick = function(){    console.log(this); // onclick事件绑定到按钮, 所以this指向btn按钮}

• 案例2: 对象调用函数

let obj = {    a: "web前端",    b: function(){        console.log(this); // obj对象    }}obj.b(); // b函数的调用者是obj

• 案例3: 取出函数, 再调用

let obj2 = {    a: "web前端",    b: function(){        console.log(this); // window    }}let fn = obj2.b; // 这里不是调用函数, 而是取出函数fn(); // 默认前面有个window在调用.

• 案例4: 返回函数再调用

let obj3 = {    a: "web前端3",    b: function(){        return function(){            console.log(this); // window        }    }}let fn2 = obj3.b(); // 调用后里面return出来function(){}赋予给fn2变量fn2(); // 默认前面有个window

• 案例5: 返回对象, 调用里面函数

let obj4 = {    a: "web前端",    b: function(){        return {            c: "h5啊",            d: function(){                console.log(this); // 指向当前c, d为key的此对象            }        }    }}obj4.b().d(); // obj4.b() 得到对象, 然后对象.d()调用的, 所以看好调用者是谁

3. 硬绑定: 直接修改this指向

使用call和apply, 会触发函数, 替换函数内this该指向的值 

function Person(){    this.username = "";    this.age = 0;}let obj = {};Person.call(obj); // call/apply效果相同, 调用Person函数, 修改函数里this指向的值为obj对象, 并且在obj对象上添加username和age属性// obj的值: {username: "", age: 0}

4. new 绑定

默认配合构造函数使用, 使this指向新的对象

function objectFactory(Base, ...arr) {    // Base 是new 后面的类名    let obj = new Object(); //从Object.prototype上克隆一个对象    obj.__proto__ = Base.prototype; // 继承Base原型里属性/方法    Base.call(obj, ...arr); // 继承Base构造函数里属性/方法    return obj; //返回 obj}

注意

绑定优先级 new > 硬绑定 > 隐式 > 默认

转载地址：https://jackiehao.blog.csdn.net/article/details/105967513 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！