javascript编程中this解析

Posted 2021-02-14 长安城下翩翩少年

一.为什么要使用this？

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this则不会这样。

二.this 是什么？

this在函数中被使用，一般情况下this指的是调用this所在函数的对象。即 this === 调用this所在函数对象。

三.this应用场景

1.当this所在的函数为对象一个健值时，这个函数中的this是指向该健值所在的对象。
2.当this所在的函数不属于对象的健值，此时直接调用该函数时，该函数中的this指向window，严格模式下指向undefined
3.构造函数中this指向new出来这个对象。
4.函数应用了 appaly、call、bind 方法，函数this指向这三个方法所指定的对象。

四.apply、call、bind 改变this指向

1.Function.prototype.apply 和Function.prototype.call 方法用法其实一致的，Function.prototype.apply传入两个参数，第一个参数为this所指向的对象，第二个参数为函数形参 - 为一个数组。Function.prototype.call 传入n个参数（n>=1），第一个参数为this指向对象，后面的参数为函数所需形参。

let obj = {
    number:0
};
function sum(){
    let sum = this.number;
    console.log(sum); //0
    console.log(arguments);    //两次输出一致为一个类数组 
    for(let i = 0,length = arguments.length;i<length;i++){
        sum += arguments[i];
    }
    return sum
}
console.log(sum.apply(obj,[1,2,3])); //6
console.log(sum.call(obj,1,2,3));     //6

2.Function.prototype.bind 也可传入n个参数，第一个参数为this指向对象，后面参数为形参，此方法和call不同之处在于 bind是在函数声明赋值给一个变量进行保存时进行绑定this指向对象和传入参数，而call 和 apply 为函数调用时候进行绑定。
注：通过bing绑定this指向对象之后，无法在函数调用时候再通过apply或者call进行更改。

let obj = {
    number:0
};
let sum = function(){
    let sum = this.number;
    console.log(sum); //0
    console.log(arguments);    //两次输出一致为一个类数组 
    for(let i = 0,length = arguments.length;i<length;i++){
        sum += arguments[i];
    }
    return sum
}.bind(obj,1,2,3);
console.log(sum()); //6
console.log(sum(4));//10      绑定时通过bind传入的为默认参数，调用函数时还可以传入参数。