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 相关文章推荐
js中数组Array的一些常用方法总结
Aug 12 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
layui弹出层效果实现代码
May 19 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
通过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
phpBB BBcode处理的漏洞
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
php session和cookie使用说明
2010/04/07 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
浅谈php命令行用法
2015/02/04 PHP
JavaScript prototype 使用介绍
2013/08/29 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python输出各行命令详解
2018/02/01 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
应届生自我鉴定
2013/12/11 职场文书
2014年科室工作总结
2014/11/20 职场文书
产品质量保证书范本
2015/02/27 职场文书
奖学金个人总结
2015/03/04 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2019消防宣传标语!
2019/07/10 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis