/*
funtion函数 谁触发指向谁
0 全局 this===window
1 看一下函数return 是否为数组 函数 对象 那么this指向return值,引用数据类型改变this的指向
2 函数触发是不是call.apply,bind 如果是,this===参数
3 看是不是 new触发的 是 this===new 实例的对象
4 普通对象调用 this===触发函数的对象
*/
情况1:普通函数的调用方式触发 此时 this 指向 window
function zhuzhu(){
console.log(this);//Window
}
window.zhuzhu();
情况2:对象的方法调用 this 指向 该方法所属的对象
let obj = {
zhuzhu: function () {
console.log(this);//{zhuzhu: ƒ}
}
}
obj.zhuzhu()
情况3:new关键字触发 this指向这个新的对象 执行构造函数 目的:给这个新对象加属性和方法
function zhuzhu() {
console.log(this);//zhuzhu {}
}
new zhuzhu();
情况4:call apply binde 触发函数,call()、apply()、bind() 都是用来重定义 this 这个对象的 bind 方法后面多了个 () 由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行
function zhuzhu(a, b) {
console.log('函数执行');
console.log(a);
console.log(b);
console.log(this);
}
//1 call 触发函数 并改变fuction函数中this,this为参数一 参数二,三,...给被触发的函数传入实参。
window.zhuzhu(1,2)//情况1 window
zhuzhu.call({},3,4) //指向空对象obj
zhuzhu.call([],4,5)//指向空数组[]
zhuzhu.call(function(){
console.log('猪猪咩');
},10,20)/*指向 ƒ (){
console.log('猪猪咩');
} */
//2 apply 参数一 改变触发函数方法题中的this 最多只能有两个参数——新this对象和一个数组 argArray 只有一个参数,也要写进数组里面 this为参数一 参数二 数组 给触发函数传递n个实参
zhuzhu.apply({},[3,4]) //指向空对象obj
zhuzhu.apply([],[3,4])//指向空数组[]
zhuzhu.apply(function(){
console.log('猪猪咩');
},[10,20])
// 3 bind() 作用:更改触发函数中this的指向 函数不能自动执行,需要再加小括号
console.log('----------');
let bar = zhuzhu.bind()//拷贝了zhuzhu函数中的代码赋值给新创建的变量
console.log(bar);//返回一个新的函数,函数与foo一样功能的函数即函数相同功能相同
bar()
zhuzhu()
console.log('----------');
zhuzhu.bind([])(13,13)//指向空数组[]
zhuzhu.bind({})(14,14)//指向空对象{}
zhuzhu.bind(function(){})(15,15)//指向函数
情况5:构造函数调用, 此时 this 指向 实例对象
function Zhuzhu(age,name){
this.name = name;
this.age = age;
console.log(this);//Zhuzhu {name: 18, age: "猪猪"}
}
let p1 = new Zhuzhu('猪猪',18);
情况6:箭头函数
// 没有this 没有argument
// 剪头函数的this是继承父执行上下文里面的this
// 关键看: 箭头函数写在哪
// 全局 this === window
// function 函数方法中 this===function中this
var obj = {
name: "猪猪",
zhuzhu1: function () {
console.log(this);
},
zhuzhu2: () => {
console.log(this);
},
obj2: {
zhuzhu3: () => {
console.log(this);
}
}
}
obj.zhuzhu1() //对象调用 指向对象obj
obj.zhuzhu2() //对象是不能形成独立的作用域的,指向对象的上一层 window
obj.obj2.zhuzhu3() //对象是不能形成独立的作用域的,this指向上上层window
情况7:通过事件绑定的方法, 此时 this 指向 绑定事件的对象
var div = document.querySelector('#app')
div.onclick = function () {
console.log(this);
}
情况8:定时器函数, 此时 this 指向 window
setTimeout(function(){
console.log(this);
},1000)
情况9:函数有return值时this指向
function zhuzhu() {
this.name = '猪猪';
//基本数据类型不改变this的指向
// return 123;//猪猪
// return 1; // 猪猪
// return undefined; // 猪猪
// return null; // 猪猪
// 引用数据类型改变this的指向
// return []//undefined
// return {}; //undefined
return function () {}; //空值?
}
let baobao = new zhuzhu();
console.log(baobao)
console.log(baobao.name)