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 快速排序函数代码
May 30 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
Element input树型下拉框的实现代码
Dec 21 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
小程序实现图片预览裁剪插件
Nov 22 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关联链接常用代码
2012/11/05 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php返回json数据函数实例
2014/10/09 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
BootStrap按钮标签及基本样式
2016/11/23 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
override和overload的区别
2016/03/09 面试题
介绍一下Ruby的特点
2013/01/20 面试题
自荐信写法介绍
2014/01/25 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
青年文明号创建承诺
2014/03/31 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2014年政教处工作总结
2014/12/20 职场文书
企业培训简报范文
2015/07/20 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Vue如何清空对象
2022/03/03 Vue.js