JS中this的作用
2021-03-16 本文已影响0人
熊啊熊c
this的用途
JS在允许在函数内部引用当前执行上下文中的变量
username = "里斯"
function getUserName(){
console.log(username) //>>里斯
}
用来优雅准确的告诉当前运行的函数所处的上下文环境
怎么优雅的指向上下文变量
当前运行所处的上下文环境的名称很长时可以使用this来指代当前运行上下文环境
let LoneLongLongNameUser = {
name:'张三',
getUserName(){
console.log(this.name);
},
getUserName1(){
console.log(LoneLongLongNameUser.name);
},
}
LoneLongLongNameUser.getUserName() //>>张三
LoneLongLongNameUser.getUserName1() //>>张三
怎么准确的指向上下文
可以准确的指向某个对象，不会产生歧义
let User = {
name:'张三',
getUserName(){
return (this.name);
},
}
//闭包隔离重名变量
function func() {
let User = {
name:'李四',
//容易看成调用全局变量的name
getUserName(){
return (User.name);
},
//调用局部变量name
getUserName1(){
return (this.name);
},
};
console.log(
User.getUserName(),
User.getUserName1()
)
}
func()//>> 李四 李四
JavaScript的this指向函数调用位置的对象，即调用函数的对象，函数在被某个对象调用时this存储着调用该函数对象的值。函数在未经过.调用时this会默认指向window对象。
怎么判断this指向了谁
由于this指向调用该函数的对象，所以找到是谁在哪里调用该函数就容易判断出this到底指向了哪里
var module = {
x: "1891",
getX: function() {
return this.x;
}
}
console.log(module.getX());//>> 1891
var getX = module.getX;//注意：getX和module.getX都是指向内存中函数的地址而已，它们并没有被“()”以便执行
//这里实际上是【间接引用】的模式，见文尾【壹.2.3.6】解释
console.log(getX()); //>> undefined
上述代码，一共调用了两次getX()
- 作为module对象的函数被调用
- 作为全局函数被调用，var getX = module.getX 在被赋值的时候只是获取module对象中getX函数的内部逻辑，并没有带有该函数声明时所处的上下文环境，所以在console中调用的时候是作为全局函数在被调用，this默认指向window。但window中并没有x变量。
this的指向规则
默认指向
函数在独立调用的时候
- 非严格模式下指向window
var a = "apple";
function func(){
console.log(this.a)
}
func() //>>apple
- 严格模式下指向undefined
var a = "apple";
function func(){
'user strict'
console.log(this.a)
}
func() //>>undefied
- 在被延迟执行的函数中this也遵循默认指向规则
隐式指向
函数体内的this由调用者的调用位置决定，如果函数被对象调用，那么函数内部的this指向调用函数的对象,this指向最靠近被调用函数的对象，离得远的不是。
function func() {
console.log(this.a);
}
var obj = {
a: 2,
func: func
};
obj.func(); //>> 2
// 找到调用位置，由 obj 对象来调用函数func，
// 此时可以说函数func被调用时，obj 对象“拥有”或者“包含”func函数，
// 所以此时的 this 指向调用 func 函数的 obj 对象。
