热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScriptthis用法总结

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

Javascript this用法总结

在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();  //  2
技术分享

在调用位置上,函数是通过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);  //  2
技术分享

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

技术分享
function foo(something) {
    this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1);

bar(2);
console.log(obj1.a);  //  2
技术分享

3.4、默认绑定

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

技术分享
function foo() {
    console.log( this.a );
}

var a = 2;

foo();  //  2
技术分享

当调用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();  //  2
obj1.foo.call(obj2);  //  3
技术分享

上面的代码中,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);  //  2

obj1.foo.call(obj2, 3);
console.log(obj2.a);  //  3

var bar = new obj1.foo(4);
console.log(obj1.a);  //  2
console.log(bar.a);  //  4
技术分享

上面代码中,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);  //  2

var baz = new bar(3);
console.log(obj1.a);  //  2
console.log(baz.a);  //  3
技术分享

上面代码中,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);  //  2
技术分享

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

Javascript this用法总结


推荐阅读
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • HDU1176:免费馅饼问题的动态规划解法分析
    题目“免费馅饼”通过动态规划方法进行了解析。该问题的时间限制为 Java 2000ms 和其他语言 1000ms,内存限制为 Java 65536K 和其他语言 32768K。本文详细探讨了如何利用动态规划算法高效求解此问题,并对算法的时间复杂度和空间复杂度进行了深入分析。此外,还提供了具体的实现步骤和代码示例,帮助读者更好地理解和应用这一方法。 ... [详细]
  • CAS 机制下的无锁队列设计与实现 ... [详细]
  • 在 JavaScript 中,变量前的加号(+)符号用于将变量转换为数字类型。例如,在 `if (+valueDistance) {}` 语句中,加号的作用类似于 `Number(valueDistance)`,会根据 Number 函数的规则将变量转换为数值或 NaN。这种用法常用于确保变量在进行数值运算时不会出现类型错误。 ... [详细]
  • 捕获并处理用户输入数字时的异常,提供详细的错误提示与指导
    在用户输入数字时,程序能够有效捕获并处理各种异常情况,如非法字符或格式错误,并提供详尽的错误提示和操作指导,确保用户能够准确输入有效的数字数据。通过这种方式,不仅提高了程序的健壮性和用户体验,还减少了因输入错误导致的系统故障。具体实现中,使用了Java的异常处理机制,结合Scanner类进行输入读取和验证,确保了输入的合法性和准确性。 ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • 如何在Mac上构建高效的本地服务器环境
    在Mac上构建高效的本地服务器环境,首先需要了解基本步骤:1. 配置目录基础;2. 启动Apache服务;3. 添加自定义文档至本地服务器;4. 查看自定义效果。此外,还可以通过手机或其他电脑访问本机服务器,以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具,本文将详细介绍每个步骤的具体操作方法。 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 概率与期望动态规划的深入探讨与应用分析
    本文深入探讨了概率与期望动态规划的基本原理及其在实际问题中的应用。概率是指某一事件发生的可能性大小,用P(A)表示。若某一事件的所有可能结果共有n种,且每种结果出现的概率相等,而事件A包含其中的m种结果,则该事件的概率P(A)为m/n。例如,在投掷骰子的情况下,如果事件A定义为掷出偶数点,由于共有3种偶数点(2、4、6),而总共有6种可能的结果,因此P(A)为1/2。文章进一步分析了概率与期望动态规划在复杂场景下的建模方法和求解策略,并通过具体实例展示了其在决策优化和风险管理中的应用价值。 ... [详细]
  • 虚拟机网络设置与数据库远程连接优化指南
    本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题,提供了一套详细的优化指南。在探讨远程数据库访问前,需确保网络配置正确,特别是桥接模式的设置。通过合理的网络配置,可以有效解决因虚拟机或网络问题导致的连接失败,提升远程访问的稳定性和效率。 ... [详细]
  • 本文详细介绍了 Windows API 中的按钮控件及其应用实例。主要功能包括:1. `CheckDlgButton` 用于更改对话框中按钮的选中状态;2. `CheckRadioButton` 用于设置单选按钮的选中状态。此外,还探讨了按钮控件在实际开发中的多种应用场景,帮助开发者更好地理解和使用这些功能。 ... [详细]
  • PHP开发人员薪资水平分析:工程师平均工资概况
    PHP开发人员薪资水平分析:工程师平均工资概况 ... [详细]
  • 通过 NuGet 获取最新版本的 Rafy 框架及其详细文档
    为了帮助开发者更便捷地使用Rafy领域实体框架,我们已将最新版的Rafy框架程序集上传至nuget.org,并同步发布了最新版本的Rafy SDK至Visual Studio。此外,我们还提供了详尽的文档和示例,以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
author-avatar
柔柔的爱2502880187
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有