区分中级前端程序员与初级前端程序员----this指向

环境变量this 的三种指向

this的指向: 谁调用我,我就指向谁

1.普通函数:函数名() this指向window

2.对象方法:对象名.方法名() this指向对象

3.构造函数:new 函数名() this指向new创建的实例对象

判断this指向的小技巧:没new没点指向window,有点指向点左边的对象,有new指向new创建的实例对象

上下文引用(修改this指向)

上下文引用:修改函数内部this的指向

call()调用函数

语法 : 函数名.call(修改的this,参数1,参数2....)

应用场景:万能数据类型检测(固定语法)

Object.prototype.toString.call(数据)

        /* 
        1. 检测数据类型 ： typeof 数据
            特点：两种数据类型无法检测 null与array
         */
        console.log(typeof null);//object
        console.log(typeof [10,20,30]);//object

        //3. 万能检测数据类型法 :
        // Object.prototype.toString.call(数据)
        /* 
        检测数据类型需要使用Object原型（Object.prototype）中的toString()来检测
            返回一个固定值： [object 数据类型]
         */

        console.log( Object.prototype.toString.call('123'));//[object String]
        console.log( Object.prototype.toString.call(666));//[object Number]
        console.log( Object.prototype.toString.call(true));//[object Boolean]
        console.log( Object.prototype.toString.call(undefined));//[object Undefined]
        console.log( Object.prototype.toString.call(null));//[object Null]
        console.log( Object.prototype.toString.call([10,20,30]));//[object Array]
        console.log( Object.prototype.toString.call(function(){}));//[object Function]
        console.log( Object.prototype.toString.call({}));//[object Object]

apply()调用函数

语法 : 函数名.apply(修改后的this,数组/伪数组)

应用场景(一般不使用,Es6有更简单的语法):求数组的最大值/最小值

       let obj = {
            0: 20,
            1: 20,
            2: 30,
            3: 20,
            4: 20,
            length: 5
        }
       
        // 求最大/小值
        let max = Math.max.apply(Math, arr)
        console.log(max)
        // Es6语法
        let max1 = Math.max(...arr)
        console.log(max1)

bind()调用函数

函数名.bind(修改后的this) // 一般不传参数

机制:不会立即执行函数,而是得到一个修改this指向的新函数

bind一般用于修改: 定时器函数、事件处理函数

     function fn(a,b){
        console.log( a + b )
        console.log( this )
    }
    
    //函数名.bind(修改后的this)
    // bind不会立即执行函数,而是返回一个修改this之后的新函数
    let newFn = fn.bind({name:'王五'})
    newFn(100,200)
    newFn(10,20)

面试必问 call apply bind 三者之间的关系

    面试必问:call apply bind
        相同点:作用一致,修改函数this指向
        不同点:
            传参方式不同
                call是按照顺序传参,apply是数组/伪数组
            执行机制不同
                call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数