this指向问题

265 阅读1分钟

参考文章: zhuanlan.zhihu.com/p/23804247

es5中有三种函数调用形式

func(p1, p2) 
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

前两种都可以转化为call形式

func(p1, p2) 等价于
func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)

所以

func.call(context, p1, p2)

才是正确的函数调用形式

func(p1, p2) 等价于
func.call(undefined, p1, p2)

如果传的context是null或undefined,那么window对象就是默认的context,这时

func.call(obj,p1,p2)

里面的this指向就是obj对象了

所以只要形式相当于

obj.func()

this指向就是obj

形式相当于

func()

this指向就是window

可以指定指向对象的形式

  1. apply
  2. call
  3. new
  4. 箭头函数

例子

var o = {
        a: 10,
        b: {
            a: 12,
            fn: function(){
                console.log(this.a); // 输出结果是 12
                console.log(this); // 输出结果是 b 对象
            }
        }
    }
    //调用
    o.b.fn(); //12 b对象
    var j = o.b.fn;
    j(); //undefined window对象
var point = {
        x : 0,
        y : 0,
        moveTo : function(x, y) {
            // 内部函数
            var moveX = function(x) {
                this.x = x;
            };
            // 内部函数
            var moveY = function(y) {
                this.y = y;
            };
            moveX(x); // 这里是全局调用
            moveY(y);
        }
    };
    point.moveTo(1, 1);
    console.log(point.x); // 0
    console.log(point.y); // 0
    console.log(x); // 1
    console.log(y);// 1