加载中…
个人资料
帅华君
帅华君
  • 博客等级:
  • 博客积分:0
  • 博客访问:3,351
  • 关注人气:0
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

javascript中this指向的规则

(2017-12-03 11:52:38)
标签:

面向对象编程

oop

javascript

前端

分类: 前端

完全掌握this在JavaScript中的指向,吹散笼罩在this周围的重重迷雾,理解谁决定了this的指向,看完本篇你能在代码运行之前就可以判断出this的指向。

javascript中this指向的规则

我们都曾以不同的方式在函数中看见过this,但仍然不能准确的指出this在JavaScript中指向谁,本篇将让你完全掌握this。

5大规则

(1) 如果 new 关键词出现在被调用函数的前面,那么JavaScript引擎会创建一个新的对象,被调用函数中的this指向的就是这个新创建的函数。


function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}

new ConstructorExample();

// -> ConstructorExample {}
// -> ConstructorExample { value: 10 }

(2) 如果通过apply、call或者bind的方式触发函数,那么函数中的this指向传入函数的第一个参数。


function fn() {
    console.log(this);
}

var obj = {
    value: 5
};

var boundFn = fn.bind(obj);

boundFn(); // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

(3) 如果一个函数是某个对象的方法,并且对象使用句点符号触发函数,那么this指向的就是该函数作为那个对象的属性的对象,也就是,this指向句点左边的对象。


var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

(4) 如果一个函数作为FFI被调用,意味着这个函数不符合以上任意一种调用方式,this指向全局对象,在浏览器中,即是window。


var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

注意,第4条规则和第3条很类似,不同的是当函数没有作为方法被调用时,它将自动隐式编程全局对象的属性——window。也就是当我们调用 fn(),可以理解为window.fn(),根据第三条规则,fn()函数中的this指向的就是window。


var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

(5) 如果出现上面对条规则的累加情况,则优先级自1至4递减,this的指向按照优先级最高的规则判断。

将规则应用于实践

看一个代码示例,并使用上面的规则判断this的指向。


var obj = {
    value: 'hi',
    printThis: function() {
        console.log(this);
    }
};

var print = obj.printThis;

obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.prinThis() ,根据第三条规则this指向的就是obj。根据第四条规则print()是FFI,因此this指向window。

其实上面的示例也考察你对于 值和引用 在JavaScript中的区别,可以看这篇文章:

JavaScript中原始值 vs. 引用值

obj对象中printThis这一方法其实是函数的地址的一个引用,当我们将obj.printThis赋值给print时,print包含的也是函数的引用,和obj对象一点关系也没有。obj只是碰巧拥有一个指向这个函数的引用的属性。

当不适用obj对象触发函数时,这个函数就是FFI。

应用多项规则

当出现多个上述规则时,将优先级高的“获胜”,如果规则2和规则3同时存在,则规则2优先:


var obj1 = {
    value: 'hi',
    print: function() {
        console.log(this);
    },
};

var obj2 = { value: 17 };

obj1.print.call(obj2); // -> { value: 17 }

如果规则1和规则3同时被应用,则规则1优先:


var obj1 = {
    value: 'hi',
    print: function() {
        console.log(this);
    },
};

new obj1.print(); // -> print {}

代码中引用了库?

有些库会将this的指向绑定更有用的对象上,比如jQuery库,在事件处理程序中,this的指向不是全局对象而被绑定到了元素对象上。因此,如果你发现一些不能用上述5项规则解释的情况,请阅读你所使用的库的官方文档,找到关于该库是如何改变this的指向的,通常通过 bind 方法改变this的指向。

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有