函数09（this、箭头函数与this）
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数中的this</title>
</head>
<body>
</body>
<script>
//写一个对象，对象中的函数叫方法，或者类方法
//对象里this指向的问题，构造函数同理
let hxj={
name:"haoxuejie",
//对象的方法里想用到对象里的变量或其他方法，这是就要加this,
//this只的是当前对象的引用
show:function(){
console.log(this);//this指向当前对象{name: "haoxuejie", show: ƒ}
console.log(this.name);
},
//但是如果对象的方法b里又定义了函数c,那这个函数c里的this指针指向window
b:function(){
let _this=this;
console.log(this);//{name: "haoxuejie", show: ƒ, render: ƒ}
function c(){
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(this);
//如果我在这个函数c里面想访问对象的name，在c()外面b里面就先存一下this
console.log(this.name);//空，因为window里也有一个name的属性
console.log(_this.name);//haoxuejie
}
c();
}
};
//hxj.show();//haoxuejie
//全局环境this就是指向window
//console.log(window);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//console.log(this==window);//true
hxj.b();
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数与this</title>
</head>
<body>
</body>
<script>
let lesson={
site:"后盾人",
lists:['js','css','mysql'],
show:function(){
const self=this;
return this.lists.map(function(list){
console.log(this);//指向window
return `${self.site}-${list}`;
});
},
show0:function(){
const self=this;
return this.lists.map((list)=>{
//使用箭头函数可以使函数内部的this指向与外部一致
console.log(this); //指向lesson
return `${this.site}-${list}`;
});
},
};
//console.log(lesson.show());
lesson.show();
lesson.show0();
console.log(lesson.show());
console.log(lesson.show0());
</script>
</html>
