Javascript的this详解


Posted in Javascript onMarch 23, 2019

在理解javascript的this之前,首先先了解一下作用域。

作用域分为两种:

  1. 1、词法作用域:引擎在当前作用域或者嵌套的子作用域查找具有名称标识符的变量。(引擎如何查找和在哪查找。定义过程发生在代码书写阶段)
  2. 2、动态作用域:在运行时被动态确定的作用域。

词法作用域和动态作用域的区别是:词法作用域是在写代码或定义时确定的;动态作用域是在运行时确定的。

this的绑定规则

this是在调用时被绑定,取决于函数的调用位置。由此可以知道,一般情况下(非严格模式下),this都会根据函数调用(调用栈)的上下文来绑定对象。

一、默认绑定

默认绑定:默认绑定是指在非严格模式下,且没有使用别的绑定规则时,this根据函数调用(调用栈)的上下文来绑定对象(全局对象)。(严格模式下则绑定undefined)

举个栗子:

function foo() {
  console.log(this.a);
};
function bar() {
  var a = 3;
  foo();
}
var a = 2;
bar(); //调用栈在全局作用域,this绑定全局对象

运行结果为: 2

//加上"use strict"运行结果则会变成this is undefined

这里的函数调用时,使用了默认绑定,函数调用(调用栈)的上下文是全局作用域,因此this绑定了全局对象(global)。

eg2:

function foo() {
  console.log(this.a)
};
var a = 2;
(function() {
  "use strict"
  foo();
})();

运行结果为: 2

 这里需要注意:对于默认绑定,决定this绑定对象的不是调用位置是否处于严格模式,而是函数体是否处于严格模式(函数体处于严格模式则this绑定undefined;否则this绑定全局对象)。另外:严格模式和非严格模式虽然有可能可以绑定,但是最好不混用。

间接引用一般也是会应用默认绑定规则。

function foo() {
  console.log(this.a);
};
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo();  //3
(p.foo = o.foo)(); //2

赋值表达式 p.foo = o.foo的返回值是直接引用目标函数foo。

二、隐式绑定

隐式绑定:由上下文对象调用,绑定到上下文对象。

举个栗子:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2,
  foo: foo
};
obj.foo();  //2
foo();    //undefined

这段代码中,foo()被当做引用属性添加到obj对象中,obj调用这个引用属性函数时,会使用该引用属性上下文,this会被绑定到obj对象。(这个函数严格来说不属于obj对象,只是作为引用属性)。属于隐式绑定。

而下面foo()函数的直接执行,并不是obj对象引用,所以上下文对象是全局对象。故this绑定了undefined。属于默认绑定。

对象引用链中只有上一层或者说最后一层在调用位置中起作用。

注意:

1.隐式绑定的函数会丢失绑定对象。此时它会应用默认绑定,将this绑定到全局对象或者undefined上,取决于是否是严格模式。

eg:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2;
  foo: foo
}
var bar = obj.foo;
var a = 'biubiubiu';
bar();

运行结果:"biubiubiu"

解析:看似bar是obj.foo的一个引用,实际上bar是直接引用了函数foo,是一个单纯的函数调用,故实为默认绑定。

2.参数传递就是隐式赋值,因此传入函数时也会被隐式赋值。

eg:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2,
  foo: foo
};
function bar(fn) {
  fn();
};
var a = "biubiubiu";
bar(obj.foo);

运行结果: "biubiubiu"

解析:实际上参数也是隐式赋值,但是参数传入函数中,并在函数中执行。此时也是直接引用了函数foo,因此也是单纯的函数调用,采用了默认绑定。

3.把函数传入语言内置函数。(与上面情况基本相似,将自己声明函数改成语言内置函数)回调函数丢失this的情况比较常见,况且还有调用回调函数的函数可能还会修改this。

三、显式绑定

显式绑定:直接将this绑定到指定对象上。Javascript中绝大多数函数和自己所创建的函数都可以使用这两种显式绑定的方法。

1、.call()
2、.apply()

这两种绑定方法,第一个参数是this绑定的对象。(如果传入的参数是原始值(字符串类型、布尔类型、数字类型),这个原始值就会被转成对象形式(new String、new Boolean、new Number)这个称为:装箱)

举个栗子:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2
};
foo.call(obj);

运行结果: 2

 然鹅,显示绑定并不能解决绑定丢失的问题。这个时候来了一位新朋友 -- 硬绑定(bind)。

3、.bind() (硬绑定是常见场景,故es5提供了该内置方法 Function.prototype.bind。)
bind()会返回一个新编码函数,把this绑定在指定参数上,并调用函数。

举个栗子:

function foo(e) {
  console.log(this.a + e);
  return this.a + e;
};
var obj = {
  a: 2
}
var bar = foo.bind(obj); //新编码函数
var b = bar(3); // 2 3
console.log(b); // 5

bind()还有一个功能:将除了第一个用于绑定this的参数之外的其他参数传给下层的函数(部分应用,是“柯里化”的一种)。

这里涉及到一个概念:把null或者undefined作为this的绑定对象传入call、apply、bind,这些值在调用的时候会被忽略,实际应用默认绑定规则。
应用场景:

  1. 1、使用apply()展开一个数组,并作为参数传递给一个函数。
  2. 2、bind()对参数进行柯里化(预先设置一些参数)。

举个栗子:

function foo(a,b) {
  console.log("a:" + a + ",b:" + b);
};
//数组“展开”成参数
foo.apply(null,[2,3]); //a:2,b:3
//bind()柯里化
var bar = foo.bind(null,2);
bar(3); //a:2,b:3

解析:传入一个参数作为this绑定对象,如果不传则使用占位符(null),此时会使用默认绑定规则。

上面这个例子可能会产生一定的副作用,如果需要运用这种场景并且更加安全。可以创建一个空对象(可以用任意喜欢的名字来命名)。

var ∅ = Object.create(null);
//上面这个例子就可以改写为:
foo.apply(∅,[2,3]); //a:2,b:3
var bar = foo.bind(∅,2);
bar(3); //a:2,b:3

注意:硬绑定之后不能使用隐式绑定和显式绑定对this进行修改
在这里介绍一种软绑定的方法softBind(),检查this绑定到全局对象或者undefined后,绑定this到指定的默认对象。绑定后效果和硬绑定一样,但是保留隐式绑定或者显式绑定修改this的能力。

四、new绑定

Javascript中的new机制与面向类语言的完全不同。在Javascript中,构造函数只是一些使用new操作符时被调用的函数,不属于一个类,也不会实例化一个类。称为对函数的“构造调用”。

举个栗子:

function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //2

使用new的过程会创建一个全新的对象,this会绑定这个新对象。如果函数没有返回其他对象,则new表达式函数调用会返回该新对象。(这个新对象会连接prototype)

四种绑定规则的优先级为:new>显式>隐式>默认

箭头函数

箭头函数是根据外层作用域(函数或全局)来决定this。(词法作用域取代this机制)
箭头函数this会绑定调用时的对象,且箭头函数的绑定无法修改(new也不行)。

其实可以理解为,箭头函数的this在词法上继承的是它所在的作用域(函数或全局)的this,而它继承的函数作用域的this绑定的是在该函数调用上下文对象,所以箭头函数的this间接的绑定在调用上下文对象。

简述: 箭头函数this(绑定作用域this)-- 作用域this(绑定在调用上下文对象)。

故:箭头函数this == 调用的上下文对象

举个栗子:

function foo() {
  setTimeout(function() {
    //这里的this在词法上继承自foo()
    console.log(this.a);
  },100);
};
var obj = { a: 2 };
foo.call(obj); //2

其实这个栗子也等价于:

function foo() {
  var that = this; //lexical capture of this
  setTimeout(function() {
    console.log(self.a)
  },100);
}
...与上面一样

所以,有两种风格:this风格(四种规则)和词法作用域风格(that = this和箭头函数)可供使用。使用时尽量避免混用,否则会造成难以维护的后果。

以上所述是小编给大家介绍的Javascript的this的作用详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Vue组件开发初探
Feb 14 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 #Javascript
vue中axios请求的封装实例代码
Mar 23 #Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php生成短域名函数
2015/03/23 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
党员志愿者活动总结
2014/06/26 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
行政处罚决定书
2015/06/24 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers