重点 函数内部的this只和函数的调用有关系 和函数的定义方式没关系
//this 指向-->
//this一般情况下在函数内部存在 跟函数的调用方式有关系
// 构造函数 函数名首字母 大写
// 一、构造函数使用的时候前面加new ,构造函数 就是用来创建新对象的-->this指向创建的对象
function Dog(){
console.log(this)
// 创建的对象 增加了 length 属性
this.length = 0; // 指 创建的对象 Dog
//增加了一个方法
this.push= function(){};// 指 创建的对象 Dog
}
var xiaohei = new Dog();
console.log(xiaohei)
//Dog() 如果当普通函数 直接调用 this就指 window
//二、全局普通函数
function test(){
console.log(this) //指window---一般的普通函数内部 不建议使用this 可以直接使用window
}
test();
// 三、对象方法内部 this -->指调用方法的对象 张三
var obj = {
name= "zhangsan",
run: function(){
console.log('跑步');
console.log(this); // 指 对象张三 -->调用方法的对象 {name: 'zhangsan',run: f}
};
};
//调用 run 函数(方法)
obj.run();
//四、 事件处理函数 内部 this (本质就是对象的方法)
document.onclick = function(){
console.log("点击doc");
console.log(this); // 指向 点击的元素 document
};
// 五、没有归属的函数 或者全局函数 --- 指向 window
// setTimeout 两个参数 一个是事件函数function(){} 一个是间隔时间 2000
setTimeout(function(){
console.log(this);//指向 window
},2000);
//自调用函数 立即执行函数
function box(){
console.log(this);//window
}
box();
(function(){
console.log(this);//window
})
改变this指向的方法 call apply bind 箭头函数
//call 是函数的方法 call 调用box函数 ,
//call 的第一个参数 就可以在调用的时候还能改变函数的this,
// 第一个参数后面的参数 会作为 box 的实参
function box(a,b){
console.log(this);//window
}
box(100,200);
var obj = {name: "zhangsan",age: 18};
// box 是一个全局普通函数 (函数本质也是对象)
box.call(obj,1000,2000); // box在执行的时候 内部的this 已经变成了obj{name: 'zhangsan'}
//apply 是函数的方法 apply 调用box函数 ,
//apply 的第一个参数 就可以在调用的时候还能改变函数的this,
// 第二个参数是一个数组 数组中的元素 会作为box 的实参
box.apply(obj,[10000,20000]) // box在执行的时候 内部的this 已经变成了obj{name: 'zhangsan'}
//bind 是函数的方法
// 给函数绑定 this ---实际上 返回了一个函数newFn ---newFn 跟test函数是一样的
// newFn 内部的this 被固定成了obj (bind的第一个参数)
//但是不会调用test 函数
function test(a,b){
console.log(this);//window
}
var newFn = test.bind(obj);
//传入参数
newFn(1,2); // 调用test函数 只不过this 现在是 {name: 'zhangsan',age: 18}