JS this

2017-09-01 本文已影响13人 DeeJay_Y

this

由于运行期绑定的特性，js中的this含义非常多，它可以是全局对象，当前对象或者任意对象，这完全取决于函数的调用方式
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，就是this指的是，调用函数的那个对象。

作为函数调用

在函数被直接调用时this绑定到全局对象。在浏览器中，window就是全局对象

    console.log(this);//window
    function fn1() {
        console.log(this); //window
    }
    fn1();

内部函数

函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量

    function fn0() {
        function fn () {
            console.log(this);//window
        }
        fn();
    }
    fn0();

setTimeout,setInterval

这2个方法执行的函数this也是全局对象

    document.addEventListener('click',function (e) {
        console.log(this);//#document
        setTimeout(function () {
            console.log(this);//window
        },200)
    },false)

作为构造函数去调用

所谓构造函数，就是通过这个函数生成一个新对象(object)。这时，this就指这个新对象。
new运算符接受一个函数F及其参数： new F(arguments)，这一过程分为3步：

1.创建类的实例。这步是把一个空的对象的proto属性设为F.prototype p1 = {};
2.初始化实例。函数F被传入参数并调用，关键字this被设定为该实例 p1.name = 'deejay' p1.sayName=... 此时的this为这个p1实例
3.返回实例 return p1

作为对象方法去调用

在JS中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this被自然绑定到该对象。

    var obj1 = {
        name: 'deejay',
        age: 20,
        fn: function () {
            console.log(this); //obj1
        }
    };
    obj1.fn();

    var obj2 = {
        name: 'deejay',
        age: 20,
        obj3: {
            fn: function () {
                console.log(this); //obj3
            }
        },
    };
    obj2.obj3.fn(); //总结，谁最后点的fn(),this就为谁

小陷阱

    var fn2 = obj1.fn;
    fn2();//window

DOM对象绑定事件

在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window）

    document.addEventListener('click',function (e) {
        console.log(this);//#document
        var _document = this;
        setTimeout(function () {
            console.log(this);//window
            console.log(_document); // $document
        },200)
    },false);

setTimeout中是window，事件处理程序中是事件源DOM对象

Function.prototype.bind

切换作用域，任何函数都有的一个方法
bind，返回一个函数，并且使函数内部的this为传入的第一个参数

    var obj1 = {
        name: 'deejay',
        age: 20,
        fn: function () {
            console.log(this); 
        }
    };
    var obj3 = {
        a: 3,
    }
    var fn3 = obj1.fn.bind(obj3);
    fn3(); //obj3

使用call和apply设置this

call,apply，调用一个函数，传入函数执行上下文及参数

    fn.call(context,param1,param2...);
    fn.apply(context,paramArray;

语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组
使用举例：

    var value = 100;
    var obj4 = {
        value: 200
    }
    function fn4(a,b) {
        console.log(this.value + a + b);
    }
    fn4(3,4); // 107
    fn4.call(obj4,3,4);//207
    fn4.apply(obj4,[3,4]); //207

利用call/apply改变this解决问题

    var arr = [1,2,4,5];
    Math.max.apply(null,arr); //得到最大值

//    让类数组对象arguments使用数组的方法
    function joinStr() {
//        return arguments.join('-');//error
        return [].join.call(arguments,'-'); //等价于下面的写法
//       return  Array.prototype.join.call(arguments,'-');
//        如果想使用bind
        var　newJoin = Array.prototype.join.bind(arguments);
        return newJoin('-');
    }
    var res = joinStr('a','b','c');
    console.log(res);//a-b-c

caller

在函数A调用函数B时，被调用函数B会自动生成一个caller属性，指向调用它的函数对象，如果函数当前没被调用，或并未被其他函数调用，则caller为null

    function fn4() {
        console.log(fn4.caller); // null
        function fn() {
            console.log(fn.caller); //fn4()
        }
        fn();
    }
    fn4();

arguments

在函数调用时，会自动在该函数内部生成一个名为arguments的隐藏对象
该对象类似于数组，可以使用[]运算符获取函数调用时的传递的实参
只有函数被调用时，arguments对象才会创建，未调用时其值为null

    function fn5(name,age) {
        console.log(arguments); //["dejay", 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        name= 'xxx';
        console.log(arguments); //["xxx", 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        arguments[1] = 30;
        console.log(arguments);//["xxx", 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    fn5('dejay',20);

callee

当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。
由于arguments在函数调用时才有效，所以未调用时arguments.callee是不存在的，即为null.callee，并且引用它会有异常.

匿名函数的使用

    var i = 0;
    window.onclick = function () {
        console.log(i)
        if (i < 5) {
            i++;
            setTimeout(arguments.callee,200);
        }
    }

关于this的指向的总结（具体见上述代码例子）：

1,window的情况：

作为函数调用
作为内部函数调用
setTimeout,setInterval
小陷阱的情况也属于作为函数调用

2,作为构造函数去调用，即new的时候：

指向构造函数创建的那个实例

3，作为对象方法去调用（例如工厂模式时）：

在使用对象方法调用方式时，this被自然绑定到该对象。

4，DOM对象绑定事件：

此时为事件源DOM对象

5，apply/call

this为apply/call指定的值

函数的执行环境

JS中的函数既可以被当做普通函数执行，也可以作为对象的方法执行，这是导致this含义丰富的主要原因。
一个函数被执行时，会创建一个执行环境(ExecutionContext)，函数的所有的行为均发生在此执行环境中，构建该执行环境时，JS会首先创建arguments变量，其中包含调用函数时传入的参数。
接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为arguments变量中对应的值，如果arguments变量中没有对应值，则该形参初始化为undefined。
如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是这些变量初始化为undefined，其赋值操作在执行环境创建成功后，函数执行才会执行，这点对于我们理解JS中的变量作用域非常重要，最后this变量赋值，会根据函数调用方式不同，赋给this全局对象，当前对象等。
至此函数的执行环境创建成功，函数会开始逐行执行，所需变量均从之前构建好的执行环境中读取。

三种变量

实例变量：（this）类的实例才能访问到的变量
静态变量：（属性）直接类型对象能访问到的变量
私有变量：（局部变量）当前作用域内才有效的变量

    function ClassA() {
        var a = 1; //私有变量 只有函数内部可以访问
        this.b = 2; // 实例变量，只有实例可以访问
    }
    ClassA.c = 3; //静态变量，也就是属性，类型访问


    console.log(a); //error  外部不能访问函数内部的局部变量
    console.log(ClassA.b);//undefined  ClassA没有b这个属性 即静态变量
    console.log(ClassA.c); //3  ClassA的一个属性c

    var classa = new ClassA();
    console.log(classa.a); //undefined
    console.log(classa.b);// 2  实例对象才有实例变量
    console.log(classa.c); //undefined