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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 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
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
下载给定网页上图片的方法
2014/02/18 Python
python采集微信公众号文章
2018/12/20 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python装饰器代码深入讲解
2021/03/01 Python
最新英语专业学生求职信范文
2013/09/21 职场文书
成人毕业生自我鉴定
2013/10/18 职场文书
采购部部门职责
2013/12/15 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
周年庆典答谢词
2015/01/20 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python