this指向问题、new的过程

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)