call apply bind的实现原理

忘是亡心i 2021-09-08 20:08 367阅读 0赞

**call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。**

var obj = {
                name: 'yr'
            }
            function getName() {
                console.log(this.name)
            }
    
            getName.call(obj)  //yr

*  call 改变了 this 的指向，指向到obj
 *  getName函数执行了

this做为对象的上下文中调用

var obj = {
                name: 'yr',
                getName: function () {
                    console.log(this.name)
                }
            }
            obj.getName()  //yr

**分析得出 **

**1.可以将getName作为obj对象的属性**

**2.调用这个属性 **

**3.调用完之后删除这个属性**

**这时this指向obj，相当于给obj添加了新属性，使用完之后需要删除**

简单得到第一个1.0版本

Function.prototype.myCall = function (context) {
                // console.log(context, this)  //this调用call的函数
                // { age: 16 } ƒ getAge() {
                //     console.log(this.age)
                // }
                context.fn = this
                context.fn()
                delete context.fn
            }
    
            var obj1 = {
                age: 16
            }
    
            function getAge() {
                console.log(this.age)
            }
            getAge.myCall(obj1)  //16

不定量传参 使用arguments 2.0版本

Function.prototype.myCall = function (context) {
                context.fn = this
                let arg = []
                for (let i = 1, len = arguments.length; i < len; i++) {
                    arg.push('arguments[' + i + ']')
                }
                eval('context.fn('+arg+')')
                delete context.fn
            }
    
            var obj1 = {
                age: 16
            }
    
            function getValue(n1,n2) {
                console.log(n1,n2,this.age) //yr lyl 16
            }
            getValue.myCall(obj1, 'yr', 'lyl')

传入null undefined 或者不传 this指向window

在mycall中第一行添加

var context = context || window;
       不传递或者传递为null undef 将context指向window 相当于在window上绑定方法

Function.prototype.myCall = function (context) {
                var context = context || window;
                context.fn = this
                let arg = []
                for (let i = 1, len = arguments.length; i < len; i++) {
                    arg.push('arguments[' + i + ']')
                }
                eval('context.fn('+arg+')')
                delete context.fn
            }
    
            var obj1 = {
                age: 16
            }
    
            var age = 22
    
            function getValue(n1,n2) {
                console.log(n1,n2,this.age) //undefined undefined 22
            }
            getValue.myCall(undefined)

apply实现方法类似

Function.prototype.myApply = function (context, arr) {
                var context = context || window;
                context.fn = this;
                var result;
                if (!arr) {
                    result = context.fn();
                }
                else {
                    var args = [];
                    for (var i = 0, len = arr.length; i < len; i++) {
                        args.push('arr[' + i + ']');
                    }
                    result = eval('context.fn(' + args + ')')
                }
    
                delete context.fn
                return result;
            }
    
            let obj = {
                name: 'yr'
            }
            var name = 'lyl'
            function getName (a,b){
                console.log(this.name,a,b) //yr 1 3 
            }
    
            getName.myApply(null) //lyl undef  undef

** bind**

// 1.改变this指向
            // 2.第一个参数是this的值，后面的参数是函数接收的参数
            // 3.返回值不变
    
            function test(a, b) {
                console.log('this', this)
                console.log(a, b)
                return 'yr'
            }
    
            const bindTest = test.bind({ name: 'lyl' }, 1, 11)()
    
            console.log(bindTest) //yr  不改变返回值
    
            Function.prototype.myBind = function () {
                const self = this
                const args = Array.prototype.slice.call(arguments)
                const thisValue = args.shift()
                return function () {
                    return self.apply(thisValue, args)
                }
            }
    
            const myBind1 = test.myBind({ name: 'yr1' }, 12, 13)()
            console.log(myBind1) //yr