JavaScript中的this（你不知道的JavaScript）

JavaScript中的this，刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要，然而自己并不关心；随着自己对JavaScript一步步深入了解，突然恍然大悟，原来它真的很重要！所以，自己花费了大约2周的时间去查贴、翻阅之前读的书籍，将this的全貌展示如下。

一、this是什么--基于调用位置的上下文；调用位置不同，this值不同。

大家都JavaScript中this存在两个误解：

（1）this指向函数自身

（2）this指向函数的作用域

作用域无法通过JavaScript代码访问，它存在于JavaScript引擎内部。每当把this和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的！

this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）！

示例：

var foo = "golbal foo";
var myObj = {foo : 'myObj foo'};
var say = function(){
	console.log(this.foo);
}

myObj.say = say;
myObj.say();	//结果：myObj foo
say();		//结果：golbal foo

二、为什么使用this

var me = {
	name: "fenfei"
};

//不使用this，调用
function speak(name){
	console.log("Hello, I'm "+ name);
}
speak(me.name);		//Hello, I'm fenfei

//使用this，调用
function speak(){
	console.log("Hello, I'm "+ this.name);
}
speak.call(me);		//Hello, I'm fenfei

this提供了一种更优雅的方式来隐式“传递”对象引用，因此可以将API设计得更加简洁并易于复用。

三. this的四大绑定规则

1. 默认绑定--函数调用类型：独立函数调用，this指向全局对象。

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

在严格模式下，全局对象将无法使用默认绑定，因此this会绑定到undefined。

var a = "foo";
function foo(){
	"use strict";
	console.log(this.a);
}
foo();	// TypeError：this is undefined

2. 隐式绑定--调用位置是否有上下文对象，或者说被某个对象拥有或者包含

function foo(){
	console.log(this.a);
}
var obj1 = {
	a : 2,
	foo : foo
}
var obj2 = {
	a : 1,
	obj1 : obj1
}
obj2.obj1.foo();	//结果：2

当foo()被调用时，它的落脚点指向obj1对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

对象属性引用链中只有最顶层或者说最后一次层会影响调用位置。

注意：隐式丢失

常见的this绑定问题就是“隐式绑定”的函数会丢失绑定对象，也就是“默认绑定”，从而把this绑定到全局对象（严格模式下为undefined）。

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

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

var a = "foo";
function foo(){
	console.log(this.a);
}
function doFoo(fn){		//var fn = obj.foo
	fn();
}
var obj = {
	a : 2,
	foo : foo
}
doFoo(obj.foo);	//"foo"

setTimeout(obj.foo, 100);	//"foo"

参数传递其实就是一种隐式赋值，因此传入函数式会被隐式赋值（LHS）

3. 显示绑定

（1）call、apply

（2）硬绑定

function foo(){
	console.log(this.a);
}
var obj = {	a:2 };
var bar = function(){
	foo.call(obj);
};
bar(); //2
setTimeout( bar, 1000);	//2
bar.call( window );	//2

创建了函数bar()，在其内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj上。无论之后如何调用函数bar，总会手动在obj上调用foo。这种显示的强制绑定，称为“硬绑定”。

4. new绑定

new调用函数会自动执行下面操作：

（1）创建（或者说构造）一个全新的对象；

（2）这个新对象会被执行[[原型]]连接；

（3）这个新对象会绑定到函数调用的this；

（4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

四、优先级

了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。

1. 函数是否是new绑定？如果是，this绑定的是新创建的对象。

var bar = new Foo();

2. 函数是否通过call、apply显示绑定或硬绑定？如果是，this绑定的是指定的对象。

var bar = foo.call(obj);

3. 函数是否在某个上下文对象中隐式调用？如果是，this绑定的是那个上下文对象。

var bar = obj.foo();

4. 上述全不是，则使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局window对象。

var bar = foo();

五、绑定this注意点

1. 忽略this

把null或undefined作为this的绑定对象传入call、apply、bind，调用时会被忽略，实际应用的是默认绑定规则！

function foo(){
	console.log(this.a);
}
var a = 1;
foo.call(null, 2);			//1
foo.apply(undefined, [3]);	//1

2. 间接引用

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 间接引用
var pfoo = o.foo;
pfoo();			//2 隐式丢失

注意：同上述“隐式丢失”结果一样，但是过程不太一样，区分！！

3. ES6箭头函数

箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。

箭头函数的绑定无法被修改。常用于回调函数中，如事件处理器或定时器。和ES6之前代码中的this = self机制一样。

function foo(){
	setTimeout(()=>{
		console.log(this.a);
	},100);
}
var obj = { a : 2};
foo.call(obj);

等价于：

function foo(){
	var self = this;
	setTimeout(function(){
		console.log(self.a);
	},100);
}
var obj = { a : 2};
foo.call(obj);

六、详解如何确定this

1.（隐式绑定）如果某个对象中某个成员是个function，当从这个对象上调用这个方法时this指向当前对象。

var FenFei = {
	firstname:"li",
	lastname:"gang",
	timeTravel:function(year){
		console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
	}
}

FenFei.timeTravel(2014);	//li gang is time traveling to 2014（父/拥有者对象：FenFei）

2.（隐私绑定）可以通过创建一个新的对象，来引用FenFei对象上的timeTravel方法。

var Camile = {
	firstname:"li",
	lastname:"yunxia"
}

Camile.timeTravel = FenFei.timeTravel;
Camile.timeTravel(2014);	//li yunxia is time traveling to 2014（父/拥有者对象：Camile）

注意：此示例同上述“隐式丢失”、“间接引用”区分！！！

3.（隐式丢失）使用变量保存FenFei.timeTravel方法的引用

var getTimeTravel = FenFei.timeTravel;
getTimeTravel(2014);	//undefined undefined is time traveling to 2014（父/拥有者对象：Window；window对象里并没有firstName和lastName属性）

PS：谨记方法中的this将指向调用它的那个父/拥有者对象！无论何时，当一个函数被调用，我们必须看方括号或者是圆括号左边紧邻的位置，如果我们看到一个引用（reference），那么传到function里面的this值就是指向这个方法所属于的那个对象，如若不然，那它就是指向全局对象的。

4. 异步调用的方法内部的this

<button id="async">点击我</button>
var btnDom = document.getElementById("async");
btnDom.addEventListener('click',FenFei.timeTravel);//undefined undefined is time traveling to [object MouseEvent]（父/拥有者对象：button）

btnDom.addEventListener('click',function(e){
	FenFei.timeTravel(2014);//li gang is time traveling to 2014（父/拥有者对象：FenFei）
});

5.（new绑定）构造函数里的this

当使用构造函数创建一个对象的实例时，构造函数里的this就是新建的实例。

var TimeTravel = function(fName, lName){
	this.firstname = fName;
	this.lastname = lName;
}

var FenFei = new TimeTravel("li", "gang");
console.log(FenFei.firstname + " " + FenFei.lastname);		//li gang

6.（显示绑定）call和apply方法设定this值

var Camile = {
	firstname:"li",
	lastname:"yunxia"
}

FenFei.timeTravel.call(Camile,2014);		//li yunxia is time traveling to 2014（指定this对象为Camile）
FenFei.timeTravel.apply(Camile,[2014]);	//li yunxia is time traveling to 2014（指定this对象为Camile）

PS：注意和上述“2”处做对比

7.（显示绑定）bind将函数绑定至某个对象（ES5）

function f(y){
	return this.x + y;
}
var o = {x:1};
/* f.bind(o)返回一个新函数，调用g(2)会把原始的函数f()当作o的方法来调用 */
var g = f.bind(o);
g(2);	// 3

补充：ES5之前方法模拟bind()方法

function myBind(f, o){
	if(f.bind){
		return f.bind(o);
	}else{
		return function(){
			return f.apply(o, arguments);
		}
	}
}

bind的作用和apply，call类似都是改变函数的execute context，也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。

七、补充

1. 使用new为函数创建多个实例的时候，这些实例会共享prototype。

当在一个实例里直接给this添加属性的时，会隐藏prototype中与之同名的属性。

如果想访问prototype中的属性值而不是自己的设定的属性值：

（1）删除实例自己添加的属性： delete 实例名.属性名

（2）直接访问prototype中的属性：Thing.prototype.name

function Thing(){}
Thing.prototype.name = "leegang";
Thing.prototype.getName = function(){
	console.log(this.name);
}
Thing.prototype.setName = function(newName){
	this.name = newName;
}
Thing.prototype.deleteName = function(){
	delete this.name;
}

var thing = new Thing();	/*thing：Thing {}*/
thing.setName("liyunxia");	/*thing：Thing {name: "liyunxia"}*/
thing.getName();		//结果：liyunxia
thing.deleteName();		/*thing：Thing {}*/
thing.getName();		//结果：leegang	thing.__proto__为Thing {name: "leegang"}

thing.name = "liyunxia";	/*Thing {name: "liyunxia"}*/
thing.getName();		//结果：liyunxia
delete thing.name;		/*thing：Thing {}*/
thing.getName();		//结果：leegang thing.__proto__为Thing {name: "leegang"}

2. 柯里化

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，如果其他的参数是必要的，返回接受余下的参数且返回结果的新函数

var sum = function(x, y){
	return x + y;
}
var succ = sum.bind(null, 1);
succ(2);	//3

function f(y, z){
	return this.x + y +z;
}
var g = f.bind({x:1}, 2);
g(3);	//6

转载请写明出处：http://blog.csdn.net/ligang2585116

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请标明出处：http://blog.csdn.net/ligang2585116！

时间： 2024-10-02 19:39:24

JavaScript中的this（你不知道的JavaScript）的相关文章

JavaScript作用域闭包（你不知道的JavaScript）

JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

JavaScript词法作用域（你不知道的JavaScript）

JavaScript并不是传统的块级作用域,而是函数作用域! 一.作用域 1. JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤: 第一步(编译阶段):var a 在其作用域中声明新变量.这会在最开始的阶段,也就是代码执行前进行. 第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值. 2. LHS & RHS(当前作用域->上级作用域->...->全局作用域) LHS(左侧):试图找到

《你不知道的JavaScript》整理（二）——this

最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函数在哪里被调用(调用栈).函数的调用方法.传入的参数等信息. this就是记录的其中一个属性,会在函数执行的过程中用到. this既不指向函数自身也不指向函数的作用域. this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用. 一.调用位置 调用位置就在当前正在执行的函数的前一个调用中

《你不知道的JavaScript》整理（一）——作用域、提升与闭包

最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 1)函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a,

你不知道的JavaScript（上中下）全册

书籍简介 JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解.本套书直面当前JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍了JavaScript中常被人误解和忽视的重要知识点.本书是其下卷,主要介绍了JavaScript入门知识和对ES6及未来发展趋势的展望.     本书既适合JavaScript语言初学者了解其精髓,又适合经验丰富的JavaScript开发人员

JavaScript中的正则表达式（终结篇）

JavaScript中的正则表达式(终结篇) 在之前的几篇文章中,我们了解了正则表达式的基本语法,但那些语法不是针对于某一个特定语言的.这篇博文我们将通过下面几个部分来了解正则表达式在JavaScript中的使用: JavaScript对正则表达式的支持程度 支持正则表达式的RegExp类型 RegExp的实例属性 RegExp的实例方法 RegExp的构造函数属性 简单的应用 第一部分:JavaScript对正则表达式的支持程度 之前我介绍了正则表达式的基本语法,如果大家不是很了解可以先看下面

在 javascript 中，为什么 [1,2] + [3,4] 不等于 [1,2,3,4]？

问题 我想将一个数组追加到另一个数组的后面,于是我在 firebug 编写如下代码: [1,2] + [3,4] 但是,出乎意料,它却输出了: "1,23,4" 而没有输出我期望的: [1,2,3,4] 解答 JavaScript 的 + 运算符有两个目的: 将两个数相加: 将两个字符串连接. 规范并没有定义 + 运算符在数组上的行为,所以javascript 首先 把数组转换成字符串,然后在字符串上进行 + 运算. 如果想连接两个数组,可以使用数组的 concat 方法: [1, 2

javascript中原型（prototype）与原型链

javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有class保留字,但不能用作变量名 原型:Javascript中的每一个对象都有一个内部私有的连接指向另一个对象,这个对象就是原对象的原型 注意:原型是一个对象,其他对象可以通过他实现属性继承 原型链:这个原型对象也有自己的原型,直到对象的原型为null为止(也就是没有原型),这种一级一级的链结构就称为

JavaScript中判断为整数的多种方式

原文:JavaScript中判断为整数的多种方式 之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示.但实际操作中比如数组索引.位操作则是基于32位整数. 方式一.使用取余运算符判断 任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. function isInteger(obj) { return obj%1 === 0 } isInteger(3

图解JavaScript中的原型链

转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof obj和obj instanceof Type来识别类型,那么两者的区别在哪?先来看两段代码 <!--typeof obj的方式判断--> <script>    var str = "toby";    console.log(typeof str);// stri