this的指向问题
使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:
哪个对象调用函数,函数里面的this指向哪个对象。
一、普通函数调用
这个情况没特殊意外,就是指向全局对象-window。
/*普通函数调用*/
//使用let
let username = "123";
function fn(){
console.log(this.username); //undefined
}
fn();
//因为let出来的是局部变量 所以在另一个{}内部肯定访问不到 输出出来肯定是undefined
//使用var
var name = "123";
function fn(){
console.log(this.name);
}
fn();
//输出出来肯定是123
//全局作用域下也可以写成 window.name="123";
window.name="123";
function fn(){
console.log(window.name)
}
fn()
//输出出来肯定还是123
二、对象函数调用
这个相信不难理解,就是哪个函数调用,this指向哪里。
/*对象函数调用*/
var name='123';
var obj={
id:20210527,
fn:function(){
console.log(this.name); //undefined
console.log(this.id); //20210527
}
}
//因为是obj调用的函数fn 所以fn中的this就指向obj 输出的就等于是 obj.name obj.id
obj.fn();
三、构造函数调用
构造函数(Constructor)中的this指向调用该构造函数所创建的实例对象(instance)。
但是,但我们在构造函数中定义一个隐形全局变量 that = this 的时候,并用该构造函数创建多个实例对象,那么这个变量that会指向哪一个实例对象呢?
function Constructor() {
that = this;
}
// console.log(that); // 报错:that is not defined
var instanceA = new Constructor();
console.log( that == instanceA ); // 结果为true
var instanceB = new Constructor();
console.log( that == instanceA ); // 结果为false
console.log( that == instanceB ); // 结果为true
由此可以看出,that将指向最后创建的实例对象
四、apply和call调用
1、apply和call简单来说就是会改变传入函数的this。
/*apply和call调用*/
let obj1={
name:'123'
};
let obj2={
name:'saucxs',
fn:function(){
console.log(this.name);
}
}
obj2.fn.call(obj1);
// 输出123
此时虽然是 obj2 调用方法,但是使用 了 call ,动态的把 this 指向到 obj1 。相当于这个 obj2.fn 这个执行环境是 obj1 。
call 和 apply 两个主要用途:
1.改变 this 的指向(把 this 从 obj2 指向到 obj1 )
2.方法借用( obj1 没有 fn ,只是借用 obj2 方法)
2、call与apply区别
call 和 apply 的作用,完全一样,唯一的区别就是在参数上面。
call 接收的参数不固定,第一个参数是函数体内 this 的指向,第二个参数以下是依次传入的参数。
apply接收两个参数,第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象(数组或者类数组)
/*apply和call区别*/
let fn=function(a,b,c){
console.log(a,b,c);
}
let arrArray=[1,2,3];
fn.call(window,arrArray);
fn.apply(window,arrArray);
五、箭头函数调用
首先不得不说,ES6 提供了箭头函数,增加了我们的开发效率,但是在箭头函数里面,没有 this ,箭头函数里面的 this 是继承外面的环境。
/*箭头函数调用*/
let obj={
name:'123',
fn:function(){
setTimeout(function()=>{console.log(this.name)})
}
}
obj.fn();
//输出123
这次输出 123 是因为,传给 setTimeout 的是箭头函数,然后箭头函数里面没有 this ,所以要向上层作用域查找,在这个例子上, setTimeout 的上层作用域是 fn 。而 fn 里面的 this 指向 obj ,所以 setTimeout 里面的箭头函数的 this ,指向 obj 。所以输出 123。
new的过程
var o = new Foo()
首先,var o = {} ,新建了一个对象。
把这个对象的原型指向Foo, o.proto = Foo.prototype
绑定this到o,Foo.call(o)
最后,如果显式返回对象类型数据,则返回该数据,否则返回o(新创建的对象)
总结:生成了一个新的对象,将其的原型和this绑定到new的对象,最后返回。
模拟new的实现
判断上否为函数,不是报错
使用Object.create来创建对象,指定prototype。
获取函数传递的参数
使用apply来绑定this到新对象上。
判断函数返回的是否为对象,若为对象返回这个对象,否则,返回我们创建的新对象。
function newOperator(ctor){
if(typeof ctor !== 'function'){
throw 'newOperator function the first param must be a function';
}
var newObj = Object.create(ctor.prototype); // 创建一个新的对象。
var argsArr = [...arguments].slice(1); // 获取参数
var ctorReturnResult = ctor.apply(newObj, argsArr); // 新对象绑定this
var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null; // 判断条件,返回的类型是object且不能为空
var isFunction = typeof ctorReturnResult === 'function';// 返回的类型是function
return isObject || isFunction?ctorReturnResult:newObj;
}
function test(a,b){
this.a = a
this.b = b
}
var test1 = new test(['1', '2'])
var test2 = newOperator(test, '1', '2');
console.log(test2,test1)