js中this的原理和用法

一.为什么要使用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指向这三个方法所指定的对象。
总结:this不存在于函数中:严格报错,非严格执行window。其余情况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传入的为默认参数,调用函数时还可以传入参数。

注意:
箭头函数不绑定Arguments 对象
箭头函数只能用于非方法函数
箭头函数不能作为构造函数
箭头函数没有property属性

原文地址:https://www.cnblogs.com/honkerzh/p/10576569.html