重点--this
2019-06-23 本文已影响0人
潘肚饿兵哥哥
function fun(a,b){
console.log("a = "+a+", b = "+b);
console.log(this);
}
fun(132,456);
解析器在调用函数时每次都会向函数内部传递进一个隐含的参数,
这个隐含的参数就是this，this指向的是一个对象，
这个对象称为函数执行的上下文对象
image.png
这里我们没有声明这个this，但是他返回了全局对象window，说明，this是有的，是window自己传了一个隐含的this进入函数里了
this本身其实是一个参数，和我们自己声明的a、b没区别，只不过他是浏览器传进去的
function fun(){
console.log(this);
}
var obj = {
name:"孙悟空",
sayName:fun
};
obj.sayName();
fun();//obj.sayName();和fun();调的是同一个函数，但是返回值不同，如下图
image.png
obj.sayName();和fun();调的是同一个函数，但是返回值不同
obj.sayName();返回值是一个对象，这个对象就是obj
fun();返回的是一个window
根据函数的的不同，this会指向不同的对象，跟
无关
-
这个方法是谁调的，this就是谁，这里是obj调的，所以这里返回值就是obj
以方法的形式调用：
this就是obj.sayName();
var obj = {
name:"孙悟空",
sayName:fun
};
function fun(){
console.log(this.name);
}
var obj2 = {
name:"沙和尚",
sayName:fun
};
obj.sayName();
fun();
这里obj.sayName();返回孙悟空，obj2.sayName();返回猪八戒，this不是固定不变的
他根据调用方法不同，对象就不同
以函数的形式调用fun（）；：
this就是window.this
function fun(){
console.log(this.name);
}
var obj2 = {
name:"沙和尚",
sayName:fun
};
var name = "全局的name属性"
fun();
以函数的形式调用：this不再是猪八戒，而是 全局的name属性
如果不是用fun（）调，而是用 obj2.sayName();调，结果就是 沙和尚
如下图：
image.png
所以：
以obj.sayName()调用，this就是obj
以 fun() 调用，实际是 window.fun();
实际都是方法调用，只不过，以方法调用是我们自己写的，以函数调用是window在调，window被隐藏了而已
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 解析器在调用函数时每次都会向函数内部传递进一个隐含的参数,
* 这个隐含的参数就是this，this指向的是一个对象，
* 这个对象我们称为函数执行的 上下文对象(他不是永远指向window)，
* 根据函数的调用方式的不同，this会指向不同的对象
* 1.以函数的形式调用时，this永远都是window
* 2.以方法的形式调用时，this就是调用方法的那个对象
*/
function fun(){
//console.log("a = "+a+", b = "+b);
console.log(this.name);
}
//fun();
//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//console.log(obj.sayName == fun);
var name = "全局的name属性";
//obj.sayName();
//以函数形式调用，this是window
//fun();
//以方法的形式调用，this是调用方法的对象
//obj.sayName();
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
var name = "全局";
function fun(){
console.log(this.name);
//这里如果写name的话,返回值是全局
//如果括号里写obj.name,那么下面调用的时候,无论obj.sayName();还是obj2.sayName();返回值都是孙悟空,因为被写死了
//所以,如果我们希望调obj就返回obj,调obj2就返回obj2的话，就用this.name,这样就成为了动态的,谁（方法）调他,他就是谁
// 因为fun里没有name,就向上一级找,就返回全局变量 全局
//写this.name,返回值是 孙悟空
}
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
obj2.sayName();
