前端面经 8 JS中的this 手写call apply bind方法

默认全局对象 常见指向调用对象

改变方法：call() apply() bind()

严格模式声明写在最顶端

全局执行环境中，指向全局对象 windows

函数中，第一类直接调用的情况 非严格模式 windows 严格模式 undefined

对象方法一直为调用者

输出结果 windows windows

输出结果：windows undefined

定义 在Fuction类的原型对象上面挂载 myCall()方法

手写call()方法

Function.prototype.myCall = function(thisArg,...args){thisArg.f = this// 这里的this是原型对象中挂载方法内的this 依旧指向调用者 this指向调用者 // 这里的this是调用call方法的函数表达式const res = thisArg.f(...args)delete thisArg.f// 使用剩余参数 return res}

call中继续使用p 属性存在同名风险

找到一个绝对不会重名的方法 使用Symbol属性

 <script>Function.prototype.mycall = function(thisArg,...arg){const key = Symbol()thisArg[key] = thisconst res = thisArg[key](...arg)delete thisArg[key]return res}function mylog(){console.log(this)return {1:5}}console.log(mylog.call({1:5}))// 使用内置Symbol内置函数</script>

手写apply()方法

    <script>Function.prototype.myapply =function(thisArg,args){const key = Symbol()thisArg[key] = thisconst res = thisArg[key](...args)delete thisArg[key]return res}function sum(num1,num2){console.log(this)return (num1+num2)}console.log(sum.myapply({1:5},[1,2]))</script>

手写 bind()方法

    <script>Function.prototype.mybind = function(thisArg,...args){return (...reargs)=>{return this.call(thisArg,...args,...reargs)}}function print(x,y,z,h){console.log(this)console.log(x)console.log(y)console.log(z)console.log(h)}const fnc = print.mybind({1:9},1,2)fnc(3,4)</script>