关闭

JS中的this指向相关

127人阅读 评论(0) 收藏 举报
分类:

关于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这个对象
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:162966次
    • 积分:4550
    • 等级:
    • 排名:第6719名
    • 原创:317篇
    • 转载:0篇
    • 译文:0篇
    • 评论:8条
    文章分类
    最新评论