js fn.call(),fn.apply()与fn.bind()

call和apply都是改变某个函数运行时的上下文(this指向),且立即执行call和apply的区别只是call单个传参,apply以数组形式传参,bind后函数不会执行,而只是返回一个改变了上下文的函数副本

Call和apply

function foo(x,y){
    console.log(x,y,this)
}

foo.call(100,1,2)//1 2 Number {100}
foo.apply(true,[3,4])//3 4 Boolean {true}

foo.apply(null)//undefined undefined Window

foo.apply(undefined)//undefined undefined Window

this需要指向一个对象,所以基本类型自动包装为对象类型

下面的例子可以看出,call改变了函数运行时的上下文(this指向)

var a=10

var o = {

    a:11,

    b:{

        a:12,

        fn:function(){

            console.log(this.a); //12

        }

    }

}

o.b.fn.call(window)//10

o.b.fn.call(o)//11

o.b.fn();//12

o.b.fn(null);//12

严格模式

function foo(x,y){

    'use strict'

    console.log(x,y,this)

}

foo.call(100,1,2)//1 2 100

foo.apply(true,[3,4])//3 4 true

foo.apply(null)//undefined undefined null

foo.apply(undefined)//undefined undefined undefined

bind

function add(a,b,c){

console.log(arguments)

    console.log(a)//100  //100

    console.log(b)//1  //200

    console.log(c)//2 //10

    console.log("-------------")

    return a+b+c

}

var func=add.bind(null,100)

func(1,2)//103

var func2=func.bind(null,200)

func2(10)//310

func2(10,20)//310

if (!function() {}.bind) {

    Function.prototype.bind = function(context) {
          var self = this
                          , args = Array.prototype.slice.call(arguments);


        return function() {

                    return self.apply(context, args.slice(1));   
        }

    };

}

Currying(柯里化)

又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

function getConfig(color,size,otherOptions){

console.log(color)

console.log(size)

console.log(otherOptions)

}

var defaultConfig=getConfig.bind(null,'#fff','1024*768')

defaultConfig('123')//#fff 1024*768 123

defaultConfig('234')//#fff  1024*768 234

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容