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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
如何在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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP Session机制简介及用法
2014/08/19 PHP
php header函数的常用http头设置
2015/06/25 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
智能钱包:Ekster
2019/11/21 全球购物
师德师风自查材料
2014/10/14 职场文书
干部考察材料范文
2014/12/24 职场文书
市场营销计划书
2015/01/17 职场文书