JS中的this指向相关

原创 2017年01月03日 17:28:00

关于JS中this的问题

JS中的函数调用有4种方式:

1、作为普通函数调用

2、作为对象方法调用

3、作为构造函数调用

4、使用call或者apply

全局执行:

首先,我们尝试全局执行下console.log(this);

浏览器会输出window对象

注意,如果在严格模式下执行'use strict',则输出的会是undefined


第一种情况:作为普通函数调用

function a(){
	this.name = '张三';
	console.log(this.name);
	console.log(this);
}
a();
console.log(name);
//张三
//window
//张三
//这里的this指向的是全局window对象,name为定义的全局变量

//换一种写法
var name = '张三';
function a(){
	var name = '李四';
	console.log(this.name);
}
a();
//张三
//同样,这里的this.name指向的也是全局对象name

//再换一种写法
var name = '张三';
function a(){
	this.name = '李四';
}
a();
console.log(name);
//李四

第二种情况:作为对象方法调用

var name = '张三';
var person = {
	name : '李四',
	showName : function(){
		console.log(this.name);
	}
}
person.showName();
//李四
//这里this指向的是person

//再执行两句话
var other = person.showName;
other();
//张三
//这里other属于全局对象,等同于window.other,this是在执行时绑定它的作用域,所以这里的this表示window对象

//注意setTimeout的一些坑
var person = {
	fun1 : function(){
		console.log(this);
	},
	fun2 : function(){
		setTimeout(this.fun1, 1000);
	}
}
person.fun2();
//在这种情况下,会输出window对象
//可以理解为setTimeout本身也是一个函数,等同于window.setTimeout,因此,这里的this是在执行的时候绑定它的作用域,则为window
//解决办法
var person = {
	fun1 : function(){
		console.log(this);
	},
	fun2 : function(){
		var _this = this;
		setTimeout(function(){
			console.log(this);
			console.log(_this);
		}, 1000);
	}
}
//window
//person
person.fun2();
//通过定义一个_this来存储this的指向

第三种情况:作为构造函数调用

function Person(){
	this.name = '张三';
}
var a = new Person();
console.log(a.name);
//张三
//使用new关键字生成的对象,会将构造函数中的this作用域绑定在该对象上面

第四种情况:使用call或者apply

var a = {
	name : '张三'
}
function foo(){
	console.log(this);
}
foo.call(a);
//Object{name : '张三'}
//在执行foo.call(a)的时候,函数内部的this指向了a这个对象

相关文章推荐

彻底弄懂js中的this指向

js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看: 全局环境中this指向window。 有以下几种...

如何理解JS中的this指向问题

如何理解JS中的this指向问题this中的最终指向的是那个调用它的函数(一定要记住这句话,但是这句话仍然有问题,下文会做解释) this在函数式编程和面向对象编程的过程中,能帮助简化我们的代码,...

js中this的指向问题

1 函数四种调用模式: // 1 函数调用模式 // 2 方法调用模式 // 3 构造函数调用模式 // 4 借用方法调用模式(上下文调用模式) // cal...

js闭包中this的指向问题及三种解决方法

下面是一个问题,对象方法中定义的子函数,子函数执行时this指向哪里? 三个问题:     (1)以下代码中打印的this是个什么对象?     (2)这段代码能否实现使myNumber.val...

js函数作用域及this指向

Title 代码输出结果:

彻底理解 JS 中 this 的指向

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象...
  • zsr1860
  • zsr1860
  • 2017年08月03日 10:15
  • 61

理解js中this的指向问题

在前端的飞速发展的过程中,各种框架层出不穷,但是当大家看到这些框架的源码时,大家也许会发现很多框架都有this 这个问题,由此看来this的指向是多么的重要,但是关于this问题许多人对于他的指向问题...

js的this指向

先补充基础知识 秘密花园  和  廖雪峰js 1.在普通模式下和严格模式下,this指向不同,普通模式下this指向window全局变量,而严格模式指向undefined 2. 下面看这道题,...

js中this指向的四大规则和示例

当一个函数被调用的时候,会创建一个活动记录(这个也是前面提到的执行上下文),这个记录会包含函数在哪里被调用,函数的调用方式,传入参数等各种信息,this就是这个记录的一个属性。 this指向的的四大...
  • sjn0503
  • sjn0503
  • 2016年08月20日 13:15
  • 268

彻底理解JS中this的指向

【转载地址】https://mp.weixin.qq.com/s/LwnhJYQPVt1rSzjTjEDjBQ初步理解:谁调用的就指向谁(后面会介绍到这句话不完全正确)进一步解析: 如果一个函数中有t...
  • web_hwg
  • web_hwg
  • 2017年08月03日 14:57
  • 77
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS中的this指向相关
举报原因:
原因补充:

(最多只允许输入30个字)