this的使用
知识点总结：
1、普通函数中的this
在普通函数中，this是表示window
console.log(this)
function abc(){
console.log(this);
function a(){
console.log(this);
}
a();
}
abc();
2、事件中的this
在事件侦听和触发过程中，执行事件触发的函数，我们称为事件处理函数，
在该函数中我们获取的this是触发事件的对象
bn.addEventListener(“click”,clickHandler);
function clickHandler(e){
console.log(this);
}
bn.onClick=function(){
console.log(this);
}
但是我们可以利用函数绑定，改变this，
例如bn.addEventListener(“click”,clickHandler.bind(this));
3、类中的this
当函数被实例化后，函数就是类的构造函数了，这个时候，
函数中的this就是被实例化的对象本身了。
function Ball(){
console.log(this);
}
var obj=new Ball();
4、函数call以后替代执行的this
使用函数的方法call，替代执行方法。关于call部分，
我们后面详细讲解该内容，但是在这里我们先做一下该部分this的说明
function fun2(){
console.log(this);
}
function fun1(callBack){
var obj={a:1};
callBack.call(obj);
}
fun1();
这个时候this是obj对象。
--------------------------------------------------------------------------------------------------------------------------------------------
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//1、 普通函数中的this ---->window
// function fn(){
// console.log(this);//ES5 this--->window
// // ES6 严格模式 this--->undefined
// }
// fn();
// 2、回调函数中的this，除了事件回调函数以外
// this----->window
// var arr=[1,2,3,4];
// arr.forEach(function(){
// console.log(this);//window
// })
// var obj={
// a:function(fn){
// // var arr=[1,2,3,4];
// // arr.forEach(function(){
// // console.log(this);//window
// // })
// // setTimeout(function(){
// // console.log(this);//window
// // },1000);
// fn();
// },
// b:function(){
// console.log(this);
// // 直接指向b函数，this---》obj
// // 当把b当成回调函数带入a函数，并且执行，this--->window
// }
// }
// obj.b();
// obj.a(obj.b);
// 3、事件函数，任何事件函数，this都会执行这个事件侦听的对象
// document.addEventListener("click",clickHandler);
// function clickHandler(e){
// console.log(this);//document
// }
// var obj={
// a:function(){
// document.addEventListener("click",this.clickHandler);
// },
// clickHandler:function(){
// console.log(this);//document
// }
// }
// 可以侦听事件的对象都是基于EventTarget这个类别产生的子类
// var a=new EventTarget();
// a.addEventListener("change",changeHandler);
// var evt=new Event('change');
// a.dispatchEvent(evt);
// function changeHandler(e){
// console.log(this);
// // this--->a
// }
// 4、对象中的this
// 对象的属性如果使用this，这个this指向对象外部的this
// var a=20;
// var obj = {
// a: 1,
// b: this.a,//当创建到这一步时，当前这个对象没有创建完成
// // 因此this指向的是当前对象外的this，对象外是window
// c: function () {
// // 在这里只是创建了c是一个函数，没有执行c
// // console.log(this);
// setTimeout(function(){
// // console.log(o);
// // console.log(this===o);//这个this和这个setTimeout外面的this相同
// }.bind(this),2000);
// //当使用bind后，这个里面的函数中的this和函数外this是相同的
// },
// d: () => {
// console.log(this);//因为使用箭头函数，所以this被指向当前函数外的this指向
// },
// };
// var o=obj;
// obj.c();//当执行obj.c时，obj对象是已经创建完成的，因此c函数中this就是函数外的对象自身
// obj={s:1};
// console.log(obj);
// obj.d();
// var o = {
// a:10,
// init: function () {
// var obj = {
// a: 1,
// b: this.a,//10
// c: function (fn) {
// // console.log(this);
// // fn();
// document.addEventListener("click",this.f);
// // 当点击时，执行this.f
// },
// d: () => {
// console.log(this);
// },
// e:function(){
// console.log(this);
// },
// f:this.e.bind(this)
// // 因为是属性，this是外部o，o.e，下面的e函数
// // bind(this) 目的是为了将o.e中this替换为这里this
// };
// // 除了箭头函数外
// // 对象的方法（函数中）this是当前这个对象自身
// // 对象的属性中this是该对象外的this指向
// // obj.c();
// // obj.d();
// // console.log(obj);
// // obj.c(obj.d);
// // obj.c(obj.e);
// obj.c()
// },
// e:function(){
// console.log(this);//o外部大对象
// }
// };
// o.init();
//5、 ES6类中this
// static 本身是一套体系，不管属性还是方法this都是类
// 没有使用static 这样属性和方法都是属于动态创建的对象，也就是构造函数new出的对象
// 对于的方法调用时，谁调用这个方法，this被指向谁
// class Box{
// static a=3;
// a=1;
// static s=this.a;//当使用静态static this都会被指向类本身
// b=this.a;//this就是当前类创建的对象自身
// constructor(){
// console.log("aaaa");
// // console.log(this);//this指向被构造函数新建出来的对象
// }
// play(){
// // console.log(this);//谁执行了这个方法，this就是谁
// document.addEventListener("click",this.clickHandler);
// }
// clickHandler(e){
// console.log(this);
// }
// static run(){
// // console.log(this);
// // 静态方法时 this--->Box
// // ES6 new 构造函数()
// // new this();
// }
// }
// var b=new Box();
// 这里就是执行构造函数，并且得到一个新对象b
// 这个新对象b中有a属性，也有play函数
// var c=new Box();
// c.play();
// console.log(c);
// Box.run();
// console.log(Box.s)
// 6、ES5 类中this
// function Box(){
// // this 就是new 当前构造函数产生新的实例对象b
// console.log(this);
// }
// Box.prototype.a=1;
// Box.prototype.play=function(){
// console.log(this);
// }
// // 在属性上增加this.a 这个this因为写在外部，this是当前代码外部环境中this
// Box.prototype.b=this.a;
// Box.c=10;
// // 在属性上增加this.a 这个this因为写在外部，this是当前代码外部环境中this
// Box.d=this.c;
// Box.run=function(){
// console.log(this);//Box
// }
// var b=new Box();
// console.log(Box.d);
// Box.run();
// 7、call、apply、bind
// 将某个对象带入到某个函数中替代原有函数中this指向，第一个参数就是要替代为的对象
// 如果替代为对象是null,undefined,this被指向window
// 如果是其他非对象类型，则会转换为对象类型
// var obj={
// a:function(){
// console.log(this);
// }
// }
// var o={a:1};
// obj.a.call(o);//a方法中的this被指向o对象
// obj.a.apply(o);//a方法中的this被指向o对象
// obj.a.bind(o);//a方法中的this被指向o对象
// obj.a.call(1);
// 8、箭头函数
// 指向箭头函数外的this指向
// var fn=()=>{
// console.log(this);//window
// }
// var obj={
// a:1,
// b:()=>{
// console.log(this);//window
// }
// }
// var obj={
// a:function(){
// var o={
// b:()=>{
// console.log(this);//obj
// }
// }
// }
// }
// class Box{
// constructor(){
// }
// run(){
// var fn=()=>{
// console.log(this);//实例化的对象,就是run函数中的this
// }
// fn();
// }
// }
// function Box(){
// }
// Box.prototype.run=()=>{
// console.log(this);
// }
// var b=new Box();
// b.run();
// class Box{
// constructor(){
// }
// play(){
// var o={
// run:function(){
// function fns(){
// console.log(this);
// }
// return fns;
// },
// play:function(fn){
// fn();
// },
// clickHandler(){
// // this 实例化的b
// o.play.call(this,o.run());
// }
// }
// document.addEventListener("click",o.clickHandler.bind(this));
// }
// }
// var b=new Box();
// b.play();
// var obj={
// a:10,
// abc:function(){
// setTimeout(()=>{
// this.a++;
// console.log(this.a,"_______");
// (function(){
// this.a++;
// console.log(this.a);
// }).call(this.c)
// },1000);
// },
// c:{
// a:20
// }
// }
// obj.abc();
</script>
</body>
</html>
浙公网安备 33010602011771号