js中this的指向

原创已于 2023-01-01 13:37:11 修改 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-10-18 21:58:42 首次发布

JavaScript教程专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JavaScript中this的指向问题，包括普通函数中的this指向window，作为对象方法调用时的指向，以及函数作为构造函数调用时的情况。同时讲解了call方法的使用，展示了如何改变函数调用时的this上下文。通过实例解析了this的动态绑定特性及其在不同场景下的应用。

当this位于普通函数中, this的值指向window，准确的说this为null，但是被解释成window

alert(window.xx);
function t() {
	this.xx = 33;
	this.yy = null;
}
alert(window.xx);
alert(window.yy); //输出undefined

作为对象的方法来调用, this指向方法的调用者, 即该对象

var obj = {
	xx: 999,
	yy: 888,
	t: function() {
		alert(this.xx);
	}
};
obj.t();

this指向，不管函数位于哪一个位置, 只要关注函数调用的位置

var dog = {
	xx: 'wangwang'
};
//this指向dog
dog.t = obj,t;
dog.t();

var show = function() {
	alert('show' + this.xx);
} 
dog.t = show;
dog.show();

函数作为构造函数调用时候，在js中没有类的概念, 创建对象是用构造函数来完成
在js中没有类的概念, 创建对象是使用构造函数来完成或者直接使用json格式来写对象

new Dog()发生了以下几个步骤

系统创建空对象{}，空对象的constructor属性指向Dog函数
将函数的this指向空对象
执行该对象
返回该对象

function Dog(name, age) {
	this.name = name;
	this.age = age;
	this.bark = function() {
		alert('I am' + this.name);
	}
}
var dog = new Dog('huzi', 2);
dog.bark();

函数call和apply

function t(num) {
	alert('我的真实年龄是' + this.age);
	alert('但是我一般告诉别人我' + (this.age + num));
}
var wangwu = {name: 'wangwu', age:30};
t.call(wangwu, 5);

函数.call(对象, 参数1, 参数2)
运行如下:

fn函数中this指向对象obj
运行fn(参数1, 参数2, 参数3)