js中如何实现函数上下文的调用

99 阅读1分钟

1.环境对象 this

  • 谁'调用'我,我就指向谁
  • 普通函数: 函数名( ) this指向 window
  • 对象方法: 对象名.方法名( ) this指向 对象
  • 构造函数: new 函数名( ) this指向 new创建实例对象

2.上下文调用

2.1 函数名.call(修改后的this,形参1,形参2…………)
2.2 函数名.apply(修改后的this, 数组或伪数组 )
2.3 函数名.bind(修改后的this)
-  函数名.call(修改后的this,形参1,形参2…………)
-  万能数据类型检测,object.prototype.toString.call(数据)
    console.log(Object.prototype.toString.call(str))
    console.log(Object.prototype.toString.call(num))
    console.log(Object.prototype.toString.call(bol))
    console.log(Object.prototype.toString.call(und))
    console.log(Object.prototype.toString.call(nul))
    console.log(Object.prototype.toString.call(arr))
    console.log(Object.prototype.toString.call(fn))
    console.log(Object.prototype.toString.call(obj))
- 函数名.**apply**(修改后的this, 数组或伪数组)
- apply会帮你遍历数组,然后按照顺序逐一传参
        function fn(a, b) {
            console.log(a + b)
            console.log(this)
        }

        //函数名.apply(修改后的this,数组或伪数组)
        //apply会帮你遍历数组,然后按照顺序逐一传参
        fn.apply({ name: '李四' }, [30, 40])
-  函数名.**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 三者区别

相同点 : 作用一致,修改函数this指向

不同点 :
1.传参方式不同 : call是按照顺序传参, apply是数组/伪数组传参
2.执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数