this 在日常的js代码中 几乎随处可见, 但理解this并不是那么容易的 ? 那么this到底是什么呢 ?
const f = function () {
console.log(x);
};
js 在设计之初是允许在函数内部调用其他外部变量的 ,就像 f 函数体里面使用了变量x
。
该变量由运行环境提供。由于函数运行在不同的运行环境。所以就需要有一种机制 ,能够在函数体内部获取当前的运行环境(又叫可执行上下文),所以 ,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。实际上 函数在调用时候 会创建一个可执行环境 包括 调用位置, 创建活动对象(arguments,其他临时变量), 作用域链 确定this指针,this 只是可执行上下文对象的其中一个属性。到此我们知道this 从哪来, this 指针又指向谁?
1.默认绑定 :当函数在全局调用时候或者不符合其他绑定规则时候 ,非严格模式下this默认指向window ,严格模式下this指向undifined;
//全局调用默认绑定window
var a = 1;
function fn (){
console.log(this===window); // true
console.log(this.a) // 1
}
fn();
函数内部的函数不符合其他的绑定规则,此时默认绑定window
function outerfn (){
var a = 2;
innerfn();
function innerfn(){
console.log(this===window); // true
console.log(this.a) ; // 1
}
}
outerfn();
2.隐式绑定 : 当函数作为对象的引用属性调用时候,this指向最后调用它的那个对象。例如
var name = '木木';
function globalFn (){
console.log(this.name)
}
var innerObj={
name :'小木木',
fn:globalFn
};
var outerObj= {
name:'小小木木',
obj:innerObj
}
innerObj.fn(); // 小木木
outerObj.obj.fn(); // 小木木
同时我们应该也要知道,js 复杂对象赋值时候,对象的属性是引用了函数对象的地址,上方隐式绑定可能出现this丢失。
function fn (){
console.log(this.a);
}
function fn1 (dofn){
if (typeof dofn !=='function')return ;
dofn();
}
var a = '我是obj外部的a';
var obj ={
a : '我是obj内部的a',
fn:fn,
};
var fn2 = obj.fn;
fn1(obj.fn) //我是obj外部的a
fn2(); //我是obj外部的a
(obj.fn)(); // 我是obj内部的a
(obj.fn||obj.fn3)() // 我是obj外部的a
(var fn4 = obj.fn)() // 我obj外部的a
当然实际的生产代码应该是没有人像最后三种那样去调用函数, 但它可以帮助我们更好的理解 this绑定的原理。 fn2 中保存的是obj.fn 函数的地址, fn2 执行的时候,相当于在全局环境中执行fn ,符合上方第一 条绑定规则。
我们知道函数的参数传递是按照值得传递,如果参数是引用类型,传递的引用类型的地址,fn1 传入的函数,相当于把obj.fn 函数的地址 赋值给了dofn ,然后函数内部执行,如第一 条绑定规则;
最后三个 第一个括号 只是用来确定执行的 优先级, (obj.fn)()等同于obj.fn() 的正常调用, this绑定 obj;
后面两个 = 、 || 是一个表达式返回的是 保存obj.fn 地址的变量 调用后等同于在全局 调用,符合第一条调用规则。
3. 显式绑定 apply 、 call 、 bind ; 三者都能改变this的指向 , 也略有不同。
call () , apply() 方法用法十分相似,相同点都是 调用一个函数, 其第一个参数对象绑定this的目标值, 不同的传参方式 call()中 所有的参数都是传给父函数本身使用的参数,apply() 方法的传参是采用数组的形式.
var a = '我是obj外部的a';
var obj = {
a:'我是obj内部的a',
};
function fn (){
console.log(this.a);
}
fn.call(obj); // 我是obj内部的a
当call 或apply 传入的第一个参数是null 时 , 内部的this 指向的window ;
bind 与上面两者相同的地方,都有可以用来改变this的指向, 不同的地方在于call和apply都是改变上下文中的this并立即执行这个函数, bind调用的函数不是立即执行, 而是会返回 被修改过this指向的函数 ;
var a = '我是obj外部的a';
var obj = {
a:'我是obj内部的a',
};
function fn (d,e,f){
console.log(this.a);
console.log(d,e,f);
}
var c=fn.bind(obj,1);
c(2,3); // 我是obj内部的a
// 1 2 3
bind 也可以添加多个参数,并且参数在执行的 时候可以再次添加, 参数是按照形参的顺序进行的,类似call的 传参方式;
4 .new 关键字改变this 指向;
es5 中,用 new
调用一个构造函数,会创建一个新对象, 构造函数中的this 指向了该实例对象,
function MyPromise (){
this.promise = 'promise';
}
var p = new MyPromise();
console.log(p); // {promise:'promise'}
我们看下 new 关键字都做了什么事?其实很简单,就干了三件事情
function _new(fn,...rest){
const tempObj = Object.create(fn.prototype);
const fnResult = fn.call(tempObj,...rest);
return fnResult instanceof Object ? fnResult : tempObj
}
第一行,我们创建了一个空对象tempObj 并且 _proto_指向构造函数的原型;
第二行,调用构造函数 改变其内部的this 指针, 构造函数属性添加到实例上,同时生成构造函数的运行的结果;
第三行,如果构造函数生成的结果是个对象,就返回该结果,否则就返回新生成的对象
5 .箭头函数中的this;
先要说明的,箭头函数没有自己的 this
绑定。箭头函数中使用的 this
,其实是直接包含它的那个函数或函数表达式中的 this。
即箭头函数中的this 来自于声明处;
var obj = {
test :function(){
// console.log(this);这里的 this 指向obj
const arrowFunction =()=>{
console.log(this===obj) // 箭头函数的this 指向声明处
}
arrowFunction();
}
};
obj.test(); // true
总结: 1-4 数字最小优先级越高;
1、函数被new调用,this指向由new新构造出来的这个对象;
2、函数通过call()、apply()、bind()调用,this指向被绑定的对象;
3、函数作为对象的方法被调用,this指向这个对象(即常说的对象上下文);
4、默认(非严格模式)情况下,this指向window, 严格模式下,this指向undefined。// 其他情况不匹配时候 都归结为此情况