JavaScript中this的全面解析及常见实例


Posted in Javascript onMay 14, 2019

前言

this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么。大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调
用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

总结: 函数被调用时发生 this 绑定,this 指向什么完全取决于函数在哪里被调用。

一、this 的绑定规则

this 一共有 4 中绑定规则,接下来一一介绍每种规则的解释和规则直接的优先级

  • 默认绑定(严格/非严格模式)
  • 隐式绑定
  • 显式绑定
  • new 绑定

1.1 默认绑定(严格/非严格模式)

  • 独立函数调用: 独立函数调用时 this 使用默认绑定规则,默认绑定规则下 this 指向 window(全局对象)。
  • 严格模式下: this 无法使用默认绑定,this 会绑定到 undefined。

独立函数调用

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

严格模式下:

function foo() {
 "use strict";
 console.log(this); //undefined
 console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined
}
var a = 2;
foo();

注意下边两种情况

var age = "18";
var obj = {
 name: "heyushuo",
 age: 25,
 fn: function() {
 function sayName() {
  console.log(this); //window
  console.log(this.age); //undefined
 }
 sayName();
 }
};
obj.fn();

函数 sayName 虽然是在 obj.fn 内部定义的,但是它仍然是一个独立函数调用,this 仍然指向 window。

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名!
bar();

虽然 bar 是 obj.foo 的一个引用,但是实际上,它引用的是函数本身,因此此时的
bar() 其实是一个不带任何修饰的独立函数调用,因此应用了默认绑定。

1.2 隐式绑定

当函数引用有上下文对象时(例如:obj.foo 这个时候使用 obj 上下文来引用函数 foo),隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

var obj = {
 name: "heyushuo,
 foo: function() {
 console.log(this.name); //heyushuo
 }
};

obj.foo();

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

var obj = {
 name: "heyushuo",
 obj1: {
 name: "kebi",
 foo: function() {
  console.log(this.name); // kebi
 }
 }
};

obj.obj1.foo();

隐式丢失

被隐式绑定的函数会丢失绑定对象,而应用默认绑定,把 this 绑定到全局对象或者 undefined(严格模式) 上。

第一种

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名!
bar();

虽然 bar 是 obj.foo 的一个引用,但是实际上,它引用的是函数本身,因此此时的bar() 其实是一个不带任何修饰的独立函数调用,因此应用了默认绑定。

第二种传入回调函数时:

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名!
function doFoo(fn) {
 fn(); // <-- 调用位置!
}
doFoo(bar); //global

//和下边这种一样
setTimeout(obj.foo, 300);

1.3 显示绑定

通过 call() 或者 apply()方法。第一个参数是一个对象,在调用函数时将这个对象绑定到 this 上,称之为显示绑定。

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

显示绑定引申出来一个硬绑定,代码如下

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) { 
 return function() {
 return fn.apply( obj, arguments ); //内部已经强制绑定了传入函数this的指向
 };
}
var obj = { 
 a:2
};
var bar = bind( foo, obj ); 
var b = bar( 3 ); // 2 3
console.log( b ); // 5

bar函数无论如何调用,它总会手动在 obj 上调用 fn,强制把 fn 的 this 绑定到了 obj。这样也解决前面提到的丢失绑定问题
由于硬绑定是一种非常常用的模式,所以在 ES5 中提供了内置的方法 Function.prototype.bind

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
var obj = { 
 a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3 
console.log( b ); // 5

1.4 new绑定

使用new来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。

  • 创建(或者说构造)一个全新的对象。
  • 这个新对象会被执行 [[ 原型 ]] 连接。
  • 这个新对象会绑定到函数调用的 this。
  • 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。

例如:

function foo() { 
 this.name = "heyushuo";
 this.age = 25
} 
foo.prototype.sayName = function(){
 console.log(this.name+this.age);
}
var bar = new foo();

console.log(bar); //{name: "heyushuo", age: 25}
//这个新对象会绑定到函数调用的 this。所以此时的this就是bar对象
console.log( bar.age ); // 25

如下图是 new foo() 这个对象

JavaScript中this的全面解析及常见实例

二、四种绑定关系的优先级

判断this,可以按照下面的顺序来进行判断:

1、函数是否在 new 中调用(new 绑定)?如果是的话 this 绑定的是新创建的对象。

var bar = new foo()

2、函数是否通过 call、apply(显式绑定)或者硬绑定调用?如果是的话,this 绑定的是指定的对象。

var bar = foo.call(obj2)

3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 绑定的是那个上下文对象。

var bar = obj1.foo()

4、如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到 undefined,否则绑定到全局对象。

var bar = foo()

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
记录vue项目中遇到的一点小问题
May 14 #Javascript
javascript中如何判断类型汇总
May 14 #Javascript
详解如何探测小程序返回到webview页面
May 14 #Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
javascript实现遮罩层动态效果实例
May 14 #Javascript
JQuery animate动画应用示例
May 14 #jQuery
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
python去除字符串中的换行符
2017/10/11 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python 读取、写入txt文件的示例
2020/09/27 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
了解AppleTalk协议吗
2014/04/01 面试题
经典的班主任推荐信
2013/10/28 职场文书
企业演讲稿范文
2013/12/28 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
公司授权委托书
2014/04/04 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
实习护士自荐信
2014/06/21 职场文书
孔繁森观后感
2015/06/10 职场文书