1. 在事件绑定中
给当前元素的某事件行为绑定方法,事件行为触发,此时方法中的this是当前操作元素
<body>
<div id="box">11111</div>
<script>
box.onclick = function () {
console.log(this)
}
</script>
</body>
输出结果:<div id="box">11111</div>
2. 普通方法执行看“点”
1)方法执行看前面有没有点,如果有,点前面是谁,this就是谁,如果没有,this就是window,或者严格模式下的undefined
function fn(){
console.log(this)
}
fn();//这里的this就是window,在严格模式下就是undefined
var obj={
name:"li",
fn:fn,
}
obj.fn();//这里的this就是obj
2)自执行的函数一般是window,严格模式下是undefined
(function () {
console.log(this)//window
})()
3)回调函数:一般来说是window,除非在执行回调函数「内部方法」做了特殊处理
3. 构造函数执行「new 执行」
构造函数体中的this是当前类的实例
function Student(name,age){
this.name = name;
this.age = age;
this.say=function(){
console.log(("我是学生"+this.name+"今年"+this.age+"岁"));
}
}
let a = new Student("xiaoming",12);
a.say();//我是学生xiaoming今年12岁
4. 箭头函数中(含块级上下文)没有自己的this,所用的this是上级上下文「宿主环境」的this
箭头函数好用但是不能滥用,不涉及this随便用
//把2.1)例子改成箭头函数,最后obj.fn(),调用是箭头函数,this指向window
var fn = ()=>{
console.log(this)
}
fn();//这里的this就是window,在严格模式下就是undefined
var obj={
name:"li",
fn:fn,
}
obj.fn();//这里的this就是window
5.基于Function.prototype上的call、bind、apply强制改变this指向
var name="xiaozhang",age=17;
var obj = {
name:"obj",
age:18,
myfun:function(){
console.log(this.name+"的年龄是:"+this.age);
}
}
console.log(obj.age);//18
obj.myfun();//obj的年龄是:18
var f = obj.myfun;
f();//xiaozhang的年龄是:17 //this 指的是window
call()、apply()、bind() 都是用来重定义 this 这个对象的!
var db = {
name:"newObj",
age:99
};
obj.myfun.call(db);//newObj的年龄是:99
obj.myfun.apply(db);//newObj的年龄是:99
obj.myfun.bind(db)();//newObj的年龄是:99 多加一个()