var site="qj" let edu={ site:"hdr", show:function(){ console.log(this.site); function render(){ let site="11"; console.log(this.site); } render() } } console.log(edu.show());
其中
function render(){ let site="11"; console.log(this.site); }
是普通函数,this的指向是window。
let Lesson={ site:"houdunren", lists:["js","css","mysql"], show:function(){ //方式1,传给self,然后传到函数中 const self=this; return this.lists.map(function(value){ return `${self.site}-${value}`; }) } } console.table(Lesson.show());
-------------------------------------------------
let Lesson={
site:"houdunren",
lists:["js","css","mysql"],
show:function(){
//方式1,传给self,然后传到函数中
// const self=this;
return this.lists.map(function(value){
return `${this.site}-${value}`;
//map的第二个参数传入this
},this)
}
}
console.table(Lesson.show());
--------------------------------------
let Lesson={
site:"houdunren",
lists:["js","css","mysql"],
show:function(){
//箭头函数中的this指向的就是上下文,或者说是父级作用域中的this,而普通函数的this指向的是window
return this.lists.map(value=>`${this.site}-${value}`);
}
}
console.table(Lesson.show());
读取按钮,和当前对象中的属性,如何实现,如下: <button>houdunren</button> let Dom={ site:"houdunren", bind:function(){ const btn=document.querySelector("button"); btn.addEventListener("click",event=>{
//this 指向父级的 console.log(event); console.log(this.site+":"+event.target.innerHTML); }) } } Dom.bind();
---------------------------------------------------------
let Dom={
site:"houdunren",
bind:function(){
const btn=document.querySelector("button");
const self=this;
btn.addEventListener("click",function(){
console.log(self.site+this.innerHTML);
})
}
}
Dom.bind();
--------------------------------------------------------
let Dom={
site:"houdunren",
//写一个handleEvent方法
handleEvent:function(event){
console.log(this.site+event.target.innerHTML)
},
bind:function(){
const btn=document.querySelector("button");
btn.addEventListener("click",this);
}
}
Dom.bind();
------------------------------------------------------
现在加上2个按钮
<button>houdunren</button>
<button>hscms</button>
let Dom={
site:"houdunren",
handleEvent:function(event){
console.log(this.site+event.target.innerHTML)
},
bind:function(){
const btn=document.querySelectorAll("button");
// btn.addEventListener("click",this);
console.log(btn.length)
btn.forEach(function(elem){
elem.addEventListener("cilck",()=>{
// 此时的this指向的是window,因为父级作用域指向的window
console.log(this);
})
})
}
}
Dom.bind();
让父级的this改变
let Dom={
site:"houdunren",
handleEvent:function(event){
console.log(this.site+event.target.innerHTML)
},
bind:function(){
const btn=document.querySelectorAll("button");
// btn.addEventListener("click",this);
console.log(btn.length)
btn.forEach(elem=>{
console.log(this);
elem.addEventListener("cilck",()=>{
// 此时的this指向的是window,因为父级作用域指向的window
console.log(this);
})
})
}
}
Dom.bind();
如下:
let Dom={
site:"houdunren",
handleEvent:function(event){
console.log(this.site+event.target.innerHTML)
},
bind:function(){
const btn=document.querySelectorAll("button");
// btn.addEventListener("click",this);
console.log(btn.length)
btn.forEach(elem=>{
console.log(this);
elem.addEventListener("click",event=>{
// 此时的this指向的是window,因为父级作用域指向的window
// console.log(this);
console.log(this.site+":"+event.target.innerHTML);
});
})
}
}
Dom.bind();
去掉箭头函数的写法:
let Dom={
site:"houdunren",
handleEvent:function(event){
console.log(this.site+event.target.innerHTML)
},
bind:function(){
const btn=document.querySelectorAll("button");
// btn.addEventListener("click",this);
console.log(btn.length)
// self
const self=this;
btn.forEach(function(elem){
console.log(this);
elem.addEventListener("click",function(){
// 此时的this指向的是window,因为父级作用域指向的window
// console.log(this);
console.log(self.site+":"+event.target.innerHTML);
});
})
}
}
Dom.bind();