<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <style> </style> </head> <body> <div class="box"> <button id="btn">click</button><br> <button onclick="console.log(this)">clickthis</button><br> <!-- this指向button自身 --> <button onclick="(function(){console.log(this)})()">clickwindow</button><!-- this指向window --> </div> <script> // "use strict" function sayHi(){ console.log(1111,this) } //sayHi()//独立函数 严格模式undefined 非严格模式window let user = { uname: 'John', sayHi() { console.log(this.uname) }, sayHi2: ()=> { console.log(this.uname) }, sayHi3(){ function innerSayHi(){ console.log('inner',this.uname) } const innerSayHi2=()=>{ console.log('inner2',this.uname) } setTimeout(innerSayHi2,1000) setTimeout(()=>{ console.log('setTimeout2',this.uname)//this user john },1000) innerSayHi();//this window undefined //innerSayHi2();//this user john } } var aa=user.sayHi window.aa()//const aa=user.sayHi 报错 var aa=user.sayHi undefined user.sayHi2() //箭头函数的this指向window undefined user.sayHi3(); const btn=document.getElementById('btn'); btn.onclick=function(){ console.log(this,this.id) //btn } // btn.onclick=()=>{ // console.log(this,this.id) //window // } //call apply bind 显式改变this指向 new 隐性改变this指向 setTimeout 内普通函数 this指向window 箭头函数 this指向外部this
// 普通函数this不是定义时确定的，是调用时确定的 箭头函数this需定义时确认的 继承外部作用域this 2、普通函数可以改变this 箭头函数不可以 3、普通函数有自己的this取决于调用方式 箭头函数没有自己this取决外部作用域this
const students={
names:['john','tom','lucy'],
className:'三年级',
showName(){
// this.names.forEach(function(name){
// console.log(this.className,name)
// },this)
this.names.forEach((name)=>{
console.log(this.className,name)
})
}
}
students.showName()
</script> </body> </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。