JavaScript中this用法学习笔记


Posted in Javascript onMarch 17, 2019

JavaScript这门语言中,最令人迷惑的地方有三个,闭包、this、原型。针对大多数人,可以利用词法作用域等避开this的坑,但是我们不能一直生活在舒适区,要敢于打破砂锅问到底,对我们来说也是一种提升。

一、一般对this关键字的误解:

1、this指向函数自身

2、this指向函数词法作用域

我们可以看以下一段代码:

function test() {
test.a = 1;
this.a = 2;
console.log(test.a);
console.log(this.a);
console.log(test.a === this.a);
}

test();
console.dir(test);

在上面这段代码中,我们在全局声明一个方法test,给test中的a属性赋值1,当前方法中的this中的a属性赋值2,加入this指向函数自身,那么test.a === this,a并且都等于2.

下面我们来看下这段代码的运行结果:

JavaScript中this用法学习笔记

JavaScript中this用法学习笔记

从上可以看出,scopes为全局作用域window,this也指向这里,虽然函数本身也是一个对象,但是this并不指向这里。

有一点我们一定要记住,this是在运行时进行绑定的,并不是在编写时绑定的,它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

既然this是在运行时绑定的,那我们有没有办法改变当前this的绑定,使其不指向window,而指向方法test呢?答案是肯定的,我们可以借助一些强制绑定方法,如call、apply、bind来改变this的指向,我们可以将代码改成下面这种方式:

function test() {
 test.a = 1;
 this.a = 2;
 console.log(test.a);
 console.log(this.a);
 console.log(test.a === this.a);
 }
 
 test.call(test);
console.dir(test);

运行结果如下:

JavaScript中this用法学习笔记

JavaScript中this用法学习笔记

接下来我们看下this是否指向函数的词法作用域,以下有段比较有意思的代码:

function parent() {
 var a = 2;
 
 function child() {
 console.log(this.a)
 }
 child();
 
 }
parent();

假如this指向函数的词法作用域,那么child方法中的this.a应该是存在,实际上的执行结果如下:

JavaScript中this用法学习笔记

实际上,在JavaScript内部,作用域确实和对象类似,可见的标识符都是它的属性。但是作用域“对象”无法通过JavaScript代码访问,它存在JavaScript引擎内部。所以每当你想要把this和词法作用域的查找混合使用时,一定要提醒自己,这是无法实现的。

二、this的绑定规则

this的绑定规则大致分为以下几类:

2.1 默认绑定

2.2 隐式绑定

2.3 显式绑定

2.4 new绑定

2.1 默认绑定

上述示例中this的指向是指向window的,他们都有一个共同的特征,不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则

2.2 隐式绑定

隐式绑定首先需要考虑的规则就是调用位置是否有上下文对象,或者说是否被某个对象拥有或包含,例如:

JavaScript中this用法学习笔记

这里的this就是指向对象obj。还有类似一些DOM事件的绑定,document.getElementById('xxx').addEventListener('click', function(){xxx});回调方法中的this是指向选择器选中的元素的。这种情况下可以简单的理解为this指向调用方法.前面的那个对象。

JavaScript中this用法学习笔记

2.3 显式绑定

显示绑定在开发过程中运用的比较多,借助于这些显式绑定方法,可以直接改变当前方法的this指向,使得js语言非常的灵活。主要有call、apply和bind三种,基本使用如下:

function sum() {
 console.log(this.a + this.b);
 }
 var obj1 = {
 a: 1,
 b: 2
 };
 var test = sum.bind(obj1);
 sum.call(obj1); //3
sum.apply(obj1); //3
test(); //3

注意事项:

call && apply第一个参数接受的是this对象,call第二个参数以后可以接受字符串形式的参数,apply接受的是一个类数组/数组参数

将null || undefined作为this的绑定对象传入call/apply/bind时,这些值在调用时会被忽略,实际应用的是默认绑定规则

2.4 new绑定

JavaScript语言中的new操作符和其他面向对象语言中的new操作符不大一样,因为在JavaScript中没有对象的概念。所有的函数都可以使用new来调用,new的调用又称为构造函数调用。在构造函数调用过程中,会自动执行下面的操作。

1、创建(或者说构造)一个全新的对象

2、这个对象会被执行[[Prototype]]连接

3、这个新对象会绑定到函数调用的this

4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

构造函数也是js中常用的一种设计模式,如以下代码:

function Test(a, b) {
       this.a = a;
       this.b = b;
       this.add = function() {
         debugger;
        console.log(this.a + this.b);
       }
    }
    var cc = new Test(1, 2);
    cc.add();
    console.log(cc);

在new调用过程中,返回了一个新对象,并且该对象的this指向Test;

JavaScript中this用法学习笔记

Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 #Javascript
微信小程序登录session的使用
Mar 17 #Javascript
Javascript读写cookie的实例源码
Mar 16 #Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 #Javascript
vue自定义指令用法经典实例小结
Mar 16 #Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 #Javascript
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
促销活动计划书
2014/05/02 职场文书
预备党员综合考察材料
2014/05/31 职场文书
组织鉴定材料
2014/06/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
导游词欢迎词
2015/02/02 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技