热门标签 | 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用法总结


推荐阅读
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时(如关闭页面或刷新页面),会触发 onunload 事件,此时可以执行预设的脚本。需要注意的是,不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
  • 探索Java 11中的ZGC垃圾收集器
    Java 11引入了一种新的垃圾收集器——ZGC,由Oracle公司研发,旨在支持TB级别的内存容量,并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 我的读书清单(持续更新)201705311.《一千零一夜》2006(四五年级)2.《中华上下五千年》2008(初一)3.《鲁滨孙漂流记》2008(初二)4.《钢铁是怎样炼成的》20 ... [详细]
  • 数据类型--char一、char1.1char占用2个字节char取值范围:【0~65535】char采用unicode编码方式char类型的字面量用单引号括起来char可以存储一 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 在项目冲刺的最后一天,团队专注于软件用户界面的细节优化,包括调整控件布局和字体设置,以确保界面的简洁性和用户友好性。 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 本文探讨了如何利用RxJS库在AngularJS应用中实现对用户单击和拖动操作的精确区分,特别是在调整区域大小的场景下。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 项目风险管理策略与实践
    本文探讨了项目风险管理的关键环节,包括风险管理规划、风险识别、风险分析(定性和定量)、风险应对策略规划及风险控制。旨在通过系统的方法提升项目成功率,减少不确定因素对项目的影响。 ... [详细]
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社区 版权所有