复习this｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 3 天跟着月影老师对js的讲解后，又简单过

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

跟着月影老师对js的讲解后，又简单过了一遍js基础，发现自己好像对this还是了解的不够。所以跟着《千古前端》又学了一遍this方面的知识。

this

ES5中，函数的调用方式的不同，this会指向不同的对象

以函数的形式调用时，this指向永远都是window。fun()=window.fun

function fun(){
        console.log(this)//指向window
        console.log(this.name)//指向的是全局变量
       }
var obj={
name:'a',
age:11,
};
var name='全局的name属性';
fun();//以函数形式调用，this就是window
//window
//全局的name属性

以方法的形式调用时，this指向调用方法的那个对象

function fun(){
        console.log(this)//指向的是调用方法的对象
        console.log(this.name)//指向的是方法中的内容
       }
       var obj1={
        name:'a',
        sayName:fun,
       };
       var obj2={
        name:'b',
        sayName:fun,
       };
       var name='全局的name属性';
       obj1.sayName();//以方法形式调用，this就是调用方法的对象

以构造函数的形式调用时，this指向实例对象
以事件绑定函数的形式调用时，this指向绑定事件的对象
使用call和apply调用时，this指向指定的那个对象

call()

call()方法的作用：可以调用一个函数，同时，还可以改变这个函数内部的this指向；可以实现继承

fn1.call(想要将this指向哪里, 函数实参1, 函数实参2);

调用函数

const obj1 = {
    nickName: 'qianguyihao',
    age: 28,
};
function fn1() {
    console.log(this);
    console.log(this.nickName);
}
fn1.call(this); // this的指向并没有被改变，此时相当于 fn1();

通过call()改变this指向

 var obj1={
            name:'a'
        };
        function fn1(a,b){
            console.log(this),
            console.log(this.name),
            console.log(a+b)
        };
        fn1.call(obj1,2,4);//先将this指向obj1，然后执行fn1()函数

通过call()实现继承

function father(myName,myAge){
            this.name=myName,
            this.age=myAge
        }
        function son(myName,myAge){
            father.call(this,myName,myAge)
        };
        const son1=new son("a",1)
        console.log(JSON.stringify(son1));

apply()

作用：调用一个函数，与此同时，改变函数内部的this指向。

fn1.apply(想要将this指向哪里, [函数实参1, 函数实参2]);
第一个参数中，如果不需要改变this指向，则传null

call()和apply()作用相同，唯一的区别在于，apply()里面传入的实参，必须是数组

var obj1={
            name:'abab',
            age:1
        };
        function fn1(a){
            console.log(this),
            console.log(this.name),
            console.log(a)
        }
        fn1.apply(obj1,['hello']);//先将this指向obj1，然后执行fn1()函数

求数组的最大值

虽然数组里没有获取最大值的方法，但是数值里有Max.max(数字1，数字2，数字3)方法，可以获取多个数值中的最大值。另外，由于apply()方法在传递实参时，传的是数组。所以我们可以通过Max.max()和apply()

const arr1 = [3, 7, 10, 8];

// 下面这一行代码的目的，无需改变 this 指向，所以：第一个参数填 null，或者填 Math，或者填 this 都可以。严格模式中，不让填null。
const maxValue = Math.max.apply(Math, arr1); // 求数组 arr1 中元素的最大值
console.log(maxValue);

const minValue = Math.min.apply(Math, arr1); // 求数组 arr1 中元素的最小值
console.log(minValue);

10
3

bind()方法

这个方法不会调用函数，但是可以改变函数内部的this指向

新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);
第一个参数：在fn1函数运行时，指向fn1函数的this指向。如果不需要改变this指向，则传null
其他参数：fn1函数的实参

引用文章

《千古前端图文教程》

复习this｜ 青训营笔记

this

call()

apply()

bind()方法

引用文章

复习this｜青训营笔记