在函数中,在严格模式下,this 是未定义的(undefined)。
1.全局使用
函数外部使用,作用域即全局作用域(window)。
在函数中,this表示全局对象,指向window;
在全局作用域中使用this,this指向全局作用域,即window;
//在函数外部用var声明的变量为全局变量,this指向window对象;
//此时调用getAge()等于调用this.getAge()等于调用window.getAge()
//this.age===window.age
var age = 14;//全局变量
var getAge=function(){
console.log(this);//window
console.log(this.age);//14
console.log(this.age===window.age);//true
}
getAge();//调用位置
function fun(){
console.log(this);//window
}
2.对象方法的调用
函数内部的作用域是局部的,属于调用当前函数的对象,所以this指向调用当前函数的对象
//使用obj调用hobby方法,此时this指向调用hobby方法的obj对象
var obj = {
name: 'xiaoxiao',
hobby: function () {
console.log(this);//obj
}
}
obj.hobby();
3.在自定义构造函数中,this直接指向当前创建出来的新对象
function Dog(name,age){
this.name=name;
this.age=age;
this.hobby=function(){
console.log(this);//Dog {name: "dd", age: 2, hobby: ƒ}
console.log(this.name);//dd
}
}
var d = new Dog('dd',2);
p.hobby();
4.在事件中,this指向事件源
<div id="box"></div>
var _box = document.getElementById("box");
_box.onclick = function () {
console.log(this);//指向被点击的box
}
this的指向绑定的时机是不同的,箭头函数在定义时已经绑定,普通函数只会在调用时确定
5.箭头函数
箭头函数没有自己的作用域,在箭头函数中的this指向其外部作用域
5.1 在全局中使用箭头函数,this指向父级作用域window
//用var声明的变量为全局变量,this仍然还是指向父级作用域window;
var age = 14;//全局变量
var getAge=()=>{
console.log(this);//window
console.log(this.age);//14
console.log(this.age===window.age);//true
}
getAge();
5.2 箭头函数在对象字面量中的this指向—this指向父级作用域window
//此时this指向window
var obj = {
name:'xiaoming',
hobby:()=>{
console.log(this);//window
}
}
obj.hobby();
这仅是箭头函数在对象字面量中的行为,在用对象实例调用时会有所差别。
5.3 在自定义构造函数中
//此时this指向Dog {name: "oo", age: 2, hobby: ƒ},因为构造函数Dog形成了一个自己的作用域,定义hobby时,箭头函数指向的父级作用域为构造函数所在的域
function Dog(name, age) {
this.name = name;
this.age = age;
this.hobby = () => {
console.log(this.name);//oo
}
_this = this;//this指向当前创建出来的新对象Dog {name: "oo", age: 2, hobby: ƒ}
}
var d = new Dog("oo", 2);
d.hobby();
console.log(_this);
写在最后:在对象字面量中使用箭头函数达不到我们预期的效果,所以不建议在对象字面量中使用箭头函数