Js-this指向问题

1.关于this我看了很多文章

每次看都会有新发现,但是每次也总是忘记 这次我不想再忘记.

https://juejin.im/post/59bfe84351882531b730bac2(参考文章)

this指向的是最终调用他的那个对象

改变this的指向问题:

1.使用箭头函数

2.使用_this = this(最常用的)

var name ='window'

var a = {

    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        var _this = this;
        setTimeout( function() {
            _this.func1()
        },100);
    }

};

a.func2()       // Cherry

3.使用apply,call,bind

this指向的是他们的第一个参数

# var a = { name : "Cherry",

func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        //}.apply(a),100); // 使用apply
        //}.call(a),100);//使用call
        }.bind(a)(),100; //使用bind
    }

};

a.func2()            // Cherry

4.new实例化一个对象

函数调用前使用的了new关键字,就是调用了构造函数.

在new实例化时,发生了什么过程呢?

var a = new myFunction("Li","Cherry");

new myFunction{
    var obj = {};
    obj.__proto__ = myFunction.prototype;
    var result = myFunction.call(obj,"Li","Cherry");
    return typeof result === 'obj'? result : obj;
}

1.创建一个空对象 obj;

2.将新创建的空对象的隐式原型指向其构造函数的显示原型。

3.使用 call 改变 this 的指向

4.如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

# 所以在new的过程中,就改变了this的指向.指向了新的对象.

函数的调用方法:

1.作为一个函数调用

var name = 'xixi'

function a(){
    var name = 'haha'
    console.log(this.name)   //指向的是window  
}

a() // xixi

就是一个函数,不属于任何对象.

2.函数作为方法调用

var name = "windowsName";
   var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
    }
}
a.fn();

这里的a对象有一个属性,有一个方法.a.fn() 即fn方法里指向的是a对象

this永远指向最后调用他的那个函数

3.使用构造函数调用方法

// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName  = arg2;
}

// This    creates a new object
var a = new myFunction("Li","Cherry");
a.lastName;                            
// 返回 "Cherry"

在实例化对象new时,就以及改变了this的指向

4.作为函数方法调用函数

var name = "windowsName";

function fn() {
    var name = 'Cherry';
    innerFunction();
    function innerFunction() {
        console.log(this.name);  // windowsName
    }
}

fn()

这个例子以及前面调用a.fun2()的例子,都是在函数方法里面再调用方法的例子.

记住一些特殊的名词,为什么自己 总是记不住呢?

只有这样,才可以更好的回答问题,就解决问题.