在JavaScript中,this关键字可以说是最复杂的机制之一。对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题。

1、this的作用

为什么要在JavaScript中使用this呢?因为this提供了一种简明的方式来隐式传递一个对象引用,可以让函数接口设计的简单且容易复用:

function display() {
console.log(this.name);
} var obj1 = {name: "obj1"};
var obj2 = {name: "obj2"}; display.call(obj1); // "obj1"
display.call(obj2); // "obj2"

通过call方法,我们可以在调用display函数时为this传入不同的对象。如果不使用this关键字,那么上面的函数就需要显示增加一个调用时上下文参数:

function display(context) {
console.log(context.name);
} var obj1 = {name: "obj1"};
var obj2 = {name: "obj2"}; display(obj1); // "obj1"
display(obj2); // "obj2"

实际上这不够简洁,当使用模式比较复杂时,显示的上下文传递会让代码变得混乱复杂。使用this关键字,我们可以在调用时为this传入不同的对象引用,保证了方法的使用灵活性。

2、this的使用复杂性

this使用机制复杂,在开发容易出问题的根本原因在于:this是在运行时绑定,而不是在编写时绑定,this实际值取决于函数调用时的上下文。this的绑定和函数声明的位置没有关系,只取决于函数的调用方式。在JavaScript中,当函数被调用时,会创建一个活动记录(执行时上下文),这个记录包含函数在何处调用、函数的调用方法和传入参数等信息,this会记录其中一个属性。判断this实际绑定值,关键在于分析函数实际调用的位置。

3、this绑定规则

前面说了函数的实际调用位置决定了this的绑定值。在JavaScript中,this有4种绑定规则。

3.1、new绑定

在JavaScript中使用new调用函数会自动执行下面的操作:

  (1)创建一个新的对象

  (2)对新对象执行原型链接

  (3)新对象会被绑定到函数的this

  (4)如果函数没有返回其他对象,那么新对象会被返回

new绑定容易理解,下面是一段常见的用new调用函数创建对象的代码:

function Book(name, author, isbn) {
this.name = name;
this.author = author;
this.isbn = isbn;
} let book = new Book("Zakas", "ES6", 12345); console.log(book.name); // "Zakas"

3.2、隐式绑定

当对象内部包含一个指向函数的属性,并且在调用时通过这个属性间接引用函数(obj.prop()的形式),那么函数内的this会隐式指向这个对象,也即隐式绑定:

function foo() {
console.log(this.a);
} var obj = {
a: 2,
foo: foo
}; obj.foo(); //

在调用位置上,函数是通过obj.foo来引用的,可以说函数被调用时obj对象拥有或包含它。此时,this绑定在obj这个上下文对象上。

3.3、显示绑定

在某些情况下,我们希望函数内的this绑定在某些指定的对象上,这称为显示绑定。在JavaScript中可以使用call和apply为函数显示指定this绑定。call和apply的第一个参数是一个对象,这个对象会被绑定到this上:

function foo() {
console.log(this.a);
} var obj = {
  a:2
}; foo.call(obj); //

使用bind也可以让this绑定在指定对象上,bind绑定也是一种显示绑定,又称为硬绑定:

function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1); bar(2);
console.log(obj1.a); //

3.4、默认绑定

当使用独立函数调用(func()形式),会发生默认绑定,可以把这条规则看成是无法使用其他规则时的默认规则。看下面的示例代码:

function foo() {
console.log( this.a );
} var a = 2; foo(); //

当调用foo时,使用默认绑定规则,this被绑定到全局对象上。在strict模式下,this会绑定到undefined。

4、绑定优先级

上面4种绑定规则独立使用的话,判断this的绑定值并不复杂。但实际函数调用时,可能多条绑定规则都可以使用,那么这时就要根据每个规则的绑定优先级来判断this实际的绑定值。接下来看各种绑定规则的优先级。

4.1、默认绑定优先级最低

默认绑定的优先级最低,这个容易理解。因为当无法使用其他的绑定规则时才会使用默认规则。

4.2、显示绑定优先级高于隐式绑定

function foo() {
console.log(this.a);
} var obj1 = {a: 2, foo: foo};
var obj2 = {a: 3, foo: foo}; obj1.foo(); //
obj1.foo.call(obj2); //

上面的代码中,obj1.foo()使用隐式绑定规则,this绑定到obj1对象上。obj1.foo.call()可同时使用隐式绑定和显示绑定规则,显示绑定优先级高于隐式绑定,this绑定到obj2对象上。

4.3、new绑定优先级高于隐式绑定

function foo(something) {
this.a = something;
} var obj1 = {
foo: foo
}; var obj2 = {}; obj1.foo(2);
console.log(obj1.a); // obj1.foo.call(obj2, 3);
console.log(obj2.a); // var bar = new obj1.foo(4);
console.log(obj1.a); //
console.log(bar.a); //

上面代码中,new obj1.foo(4)可同时使用new绑定和隐式绑定。由bar.a的值为4可以知道,new绑定优先级高于隐式绑定。

4.4、new绑定优先级高于显示绑定

function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1); bar(2);
console.log(obj1.a); // var baz = new bar(3);
console.log(obj1.a); //
console.log(baz.a); //

上面代码中,new bar(3)可同时使用new绑定和bind绑定。baz.a的值为3,说明new绑定优先级高于隐式绑定。

4.5、综述

现在可以根据this绑定优先级判断函数在调用位置实际绑定的值。实际可以按照下面的顺序判断:

  (1、函数是否在new中调用?如果是的话this绑定新创建的对象。调用例子:var bar = new foo()。

  (2、函数是否通过apply、call显示绑定或者bind硬绑定?如果是,this绑定指定的对象。调用例子:var bar = foo.call(obj)。

  (3、函数是否在某个上下文对象中调用(隐式绑定)?如果是,this绑定在上下文对象上。调用例子:var bar = obj.foo()。

  (4、如果都不是的话,使用默认绑定。在严格模式下,this绑定到undefined,在非严格模式下,绑定到全局对象。调用例子:var bar = foo()。

5、箭头函数中的this

ES6中引入了箭头函数,箭头函数使用操作符=>定义。箭头函数不使用上面4种this绑定规则,而是根据外层作用域来决定this:

function foo() {
return (a) => {
console.log(this.a);
};
} var obj1 = {a:2};
var obj2 = {a:3}; var bar = foo.call(obj1);
bar.call(obj2); //

foo内部的箭头函数创建时,foo函数内this绑定到obj1上,bar(箭头函数)的this也会绑定到obj1上,箭头函数内的this是不能被修改的。

JavaScript this用法总结的更多相关文章

  1. javascript webstorm用法

    javascript  webstorm用法 一.什么是webstorm?       WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“We ...

  2. JavaScript this用法总结(**************************************)

    JavaScript this用法总结 在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么 ...

  3. <a href="javascript:;">的用法说明

    <a href="javascript:;">的用法说明 1.标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 UR ...

  4. javascript:void(0)和javascript:;的用法

    一.JavaScript:void(0) 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢 ...

  5. JavaScript高级用法二之内置对象

    综述 本篇的主要内容来自慕课网,内置对象,主要内容如下 1 什么是对象 2 Date 日期对象 3 返回/设置年份方法 4 返回星期方法 5 返回/设置时间方法 6 String 字符串对象 7 返回 ...

  6. Javascript typeof 用法

    在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ...

  7. javascript sort 用法

    <html> <head> <title></title> <script type="text/javascript" sr ...

  8. 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  9. JavaScript高级用法三之浏览器对象

    综述 本篇的主要内容来自慕课网,内置对象,主要内容如下 1 window对象 2 JavaScript 计时器 3 计时器setInterval() 4 取消计时器clearInterval() 5 ...

随机推荐

  1. 【译】RabbitMQ:Topics

    在前面的教程中,我们对日志系统进行了功能强化.我们使用direct类型的交换器并且为之提供了可以选择接收日志的能力,替换了只能傻乎乎的广播消息的fanout类型的交换器.尽管使用direct类型的交换 ...

  2. java项目中build path的设置

    右键点击项目新建文件libs 添加jtds  jar包引用本地动态链接库(dll)的设置方法 配置LibraryJRE的添加和更换  Java项目中build path的设置总结,包括JRE的添加和更 ...

  3. git 调用 Beyond Compare

    转载自  http://www.jackness.org/2015/03/31/git-%E8%B0%83%E7%94%A8-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%AF%B9% ...

  4. $anchorScroll和$cache

    1.$achorScroll服务---用于描点跳转 $scope.change = function(id){ $location.hash(id); $anchorScroll(); }; 只要给l ...

  5. 用muduo实现memcached协议的例子

    最近花了两天时间用 muduo 部分实现了 memcached 服务器协议,代码位于 examples/memcached/server,能通过 memcached 的大部分测试用例(incr/dec ...

  6. 无域环境下,VCENTER5.5 更改IP后 无法登陆异常修复

    转自http://bbs.vmsky.com/forum.php?mod=viewthread&tid=45593&highlight=vcenter%2Bip 由于没有域环境,SSO ...

  7. jQuery常用的插件及功能汇总-持续

    1.图片轮播 jquery.soChange.js 2.滚动展示 MSClass.js 3.md5加密 md5.js 4.cookie操作 cookie.js 5.

  8. Ruby:字符串处理函数

    字符串处理函数1.返回字符串的长度 str.length => integer 2.判断字符串中是否包含另一个串 str.include? other_str => true or fal ...

  9. .net 微信分享功能

    微信在国内目前无疑是最火的社交软件,智能手机装机必备. 微信api有java,php,Python语言的demo, 为毛没有C#的范例?兄长今天给各位带来一个.不叫哥(割)了,A股今天又暴跌[3912 ...

  10. Dancing Links & Algorithm X

    1 参考链接 http://www.cnblogs.com/steady/archive/2011/03/15/1984791.html#undefined http://en.wikipedia.o ...