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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
Javascript模块模式分析
May 16 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
Openlayers实现地图全屏显示
Sep 28 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的五种设计模式
2012/09/05 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP CURL使用详解
2019/03/21 PHP
图片按比例缩放函数
2006/06/26 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Java程序员面试题
2013/07/15 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server