1-全局中的this
全局中的this就是window对象
<script>
console.log(this);//window
</script>
2-事件处理函数中的this
var box=document.getElementById("box");
box.onmouseover=function(){
console.log(this);//box
}
<div id="con" onclick="console.log(this)">con</div> //con
3-自执行函数中的this
- 在非严格模式下浏览器中运行,this指的是window
- 在非严格模式node交互界面中,this指的是默认暴露出的模块
- 在非严格模式node的js文件中,this指的是global对象
(function(){
console.log(this); //window
})()
// 在严格模式下this为undefined (严格模式下函数调用时省略window)
(function(){
"use strict" //开启严格模式
console.log(this); //undefined
})()
4-call、bind中的this
//函数.call()会直接调用该函数,并且call中的第0个参数就是函数执行中的this,后面的参数是函数执行时的参数
function fn(m,n){
console.log(this.a);
}
fn.call({a:1},2,3); //1 2 3
//函数.bind()会返回一个新的函数,新函数的参数就是原函数执行中的this,这个新函数不会立即执行,this被修改,但是只能被修改一次
function fn(){
console.log(this.b);
}
var fn1=fn.bind({b:2});
fn1(); //2
5-箭头函数中的this
与定义时环境中的this一样,bind和call不能修改其内部this指向
var fn=()=>{
console.log(this);
}
fn();//window
var box=document.getElementById("box");
box.onclick=function(){
setTimeout(()=>{
console.log(this); //box
},1500)
}
全局中定义箭头函数this为window对象
fn=()=>{
console.log(this);
}
fn();//window
对象内部定义的箭头函数this指向window
<script>
var a=1;
var obj={
a:2,
fn1:()=>{
console.log(this.a);
},
fn2:function(){
console.log(this.a);
}
}
obj.fn1(); //1
obj.fn2(); //2
</script>
因为归根到底,obj对象也是在全局中定义的,但是普通的函数就指向对象本身了,因为普通函数被谁调用,this就指向谁
对象内部的函数返回箭头函数
<script>
var x=1;
var obj1={
x:2,
fn3:function(){
return function(){
console.log(this.x);
}
},
fn4:function(){
return ()=>{
console.log(this.x);
}
}
}
var innerFn3=obj1.fn3();
innerFn3(); //this为window,因为此处的innerFn3是在全局中调用的
var innerFn4=obj1.fn4();
innerFn4(); //this为obj1,因为此处的innerFn4是在obj内部定义的
</script>
6-对象方法内部的this
对象调用对象内部的函数时,this指向该对象
var obj1={
a:1,
fn1:function(){
console.log(this);
}
}
obj1.fn1(); //obj
obj1.fn1.bind({z:"zds"})(); //zds
但是如果后续添加的函数是箭头函数,this指向还是遵循箭头函数在哪定义,this就指向谁
var obj2={
m:2
};
//全局定义一个箭头函数fn3
var fn3=()=>{
console.log(this);
}
obj2.fn3=fn3;
obj2.fn3(); //window
多层嵌套对象中的函数调用时,this指向为“就近原则”
var obj3={
x:1,
y:{
p:3,
fn1:function(){
console.log(this);
}
},
}
obj3.y.fn1();//y对象
var temp=obj3.y.fn1;
temp();//window
7-构造函数中的this
function Person(name,age){
this.name=name;
this.age=age;
return 1; //返回非null的对象,那么实例化的对象就是返回出的对象
//return {};
}
var p1=new Person('朱东帅',22);
console.log(p1);
8-原型链上函数的this
var p={
a:1,
fn:function(){
console.log(this.a)
}
}
var c=Object.create(p); //以p为模板创建一个新的对象
console.log(c);
console.log(c.a); //如果一个对象上没有某个属性或者方法时,它会随着原型链__proto__去找
console.log(c.__proto__); //p对象
console.log(p.__proto__); //js内置对象
c.fn(); //1
9-geter和seter
var obj={
a:1,
b:2,
get sum(){
console.log('正在尝试访问sum...');
//return 2;
return this.a+this.b;
},
set sum(z){
console.log('正在设置sum');
this.a=z/2;
this.b=z/2;
}
}
console.log(obj.sum);