浏览器(解析器)在调用函数每次都会向函数内部传递一个隐含的参数
这个隐含参数就是 this ,this指向的是一个对象(object window)
这个对象称为函数执行的上下文的对象
this不是固定的,根据函数调用的方式不同,this指向不同对象
以函数形式调用
this永远指向window
<script>
function fun(a, b) {
console.log(this);
}
fun();
</script>
// 输出 Window
以方法的形式调用,this就是指向调用方法的对象
<script>
function fun(a, b) {
console.log(this);
}
//fun(); 结果object window
var obj = {
name: "TOM",
sayName: fun
};
console.log(obj.sayName == fun); //true ,此处两个相等
obj.sayName();
//相似 fun() 结果为:object object 发生改变
//输出 object {name="TOM", sayName=fun()} 相当于调用obj
</script>
>
<script>
function fun(a, b) {
console.log(this.name);
}
var obj = {
name: "TOM",
sayName: fun
};
var name = "全局name";
fun(); //相当于window.this
//输出 全局name
obj.sayName(); //相当于obj.name
//输出 TOM
</script>
不使用 this 的情况
<script>
function fun() {
console.log(name); // ---->name在此处写死,不用this的话
}
var obj = {
name: "TOM",
sayName: fun
};
var name = "全局name";
fun();
//输出 全局name
obj.sayName(); //相当于fun()
//输出 全局name
</script>
<script>
function fun() {
console.log(obj2.name);
// ---->使用obj2.name 写死,不用this的话
}
var obj = {
name: "TOM",
sayName: fun
};
var obj2 = {
name: "JOM",
sayName: fun
};
var name = "全局name";
fun();
//输出 JOM
obj.sayName();
//输出 JOM
obj2.sayName();
//输出 JOM
</script>
使用 this更加灵活
<script>
function fun() {
console.log(this.name);
// ---->使用this
}
var obj = {
name: "TOM",
sayName: fun
};
var obj2 = {
name: "JOM",
sayName: fun
};
var name = "全局name";
fun();
//输出 全局name
obj.sayName();
//输出 TOM、
obj2.sayName();
//输出 JOM
</script>