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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js自制图片放大镜功能
Jan 24 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
js中日期的加减法
2015/05/06 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
微信小程序实现自动定位功能
2018/10/31 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
Python实现读取json文件到excel表
2017/11/18 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python3访问字典里的值实例方法
2020/11/18 Python
python 实现超级玛丽游戏
2020/11/25 Python
详解python中的异常捕获
2020/12/15 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
评职称个人总结
2015/03/05 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang