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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
《世界多美呀》教学反思
2014/03/02 职场文书
高中家长寄语
2014/04/02 职场文书
党员十八大心得体会
2014/09/12 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP