call/apply/bind日常编码中被开发者用来实现 “对象冒充”,也即
“显示绑定this“。面试题:“call/apply/bind源码实现”,事实上是对 JavaScript
基础知识的一个综合考核。

 

  • call(), apply() 都是立即调用了对应的函数,而 bind()
    会生成一个新的函数,
  • bind() 生成的新函数返回后,你想什么时候调就什么时候调

javascript中apply、call和bind的区别

call,apply继承并调用该函数,bind继承后未调用函数。

相关知识点:

在Javascript中,bind, apply,
call方法都可以显式绑定上下文this,这三者有何不同呢?

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处:

var React = require('react'); //核心
var ReactDom = require('react-dom'); //描画dom
var Nav=React.createClass({
  render: function(){
    return <div>Nav</div>
  }
});
var Header=React.createClass({
  getInitialState: function(){//组件初始状态
    return {
      // 数据名:值
      str:'bmw',
    }
  },
  show: function(a,ev){
    // alert(a);//参数
    // console.log(this);
    console.log(ev);//代理事件对象
    // ev.target.style.background='red';

  },
  render: function(){
    /*var show=function(){
      alert('ok');
    };*/
    return <div>
      <input type="button" value="按钮" onClick={this.show.bind(this,12)}/>  //此处只能用bind,如果用的是call或apply,打开页面后尚未点击时函数show()就已经执行了(被调用)。
    </div>
  }
});

//组件属性 , 值是string||表达式
ReactDom.render(
  <Header></Header>,
  document.querySelector('#app')
);

作用域;this 指向;函数柯里化;原型与原型链;call/apply/bind
的区别三者都可用于显示绑定this;

bind只绑定this不马上执行

const m = {
    'x': 1
};

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

foo.apply(m, [5]);
foo.call(m, 5);
const foo1 = foo.bind(m, 5);
foo1();
  1. 都是用来改变函数的this对象的指向的。
  2. 第一个参数都是this要指向的对象。
  3. 都可以利用后续参数传参。

 

call/apply的区别方式在于参数传递方式的不同;

 

区别在哪里的,先看一个例子

另,call和apply的区别在于:call必须明确地传入每一个参数,apply传入参数数组。(详见《高级程序设计》p116)

fn.call(obj, arg1, arg2, …), 传参数列表,以逗号隔开;fn.call(obj,
[arg1, arg2, …]),
传参数数组;bind返回的是一个待执行函数,是函数柯里化的应用,而call/apply则是立即执行函数思路初探

var person = {
    firstname: 'darren',
    lastname: 'ji',
    getFullName: function(){
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

//在浏览器中这里的this就是指向window
var logName = function(arg1, arg2){
    console.log(this.getFullName());
}

//bind只是设置了this的指向,本身并不能执行
var logPersonName = logName.bind(person);

//darren ji
logPersonName();
var xw={
    name: "小王",
    gender: "男",
    age: 24,
    say: function(){
        alert(this.name+" , "+this.gender+" ,今年"+this.age);
    }
}
var xh={
    name: "小红",
    gender: "女",
    age: 18
}
xw.say();

即,call ( 在其中运行函数的作用域,每一个参数 ) → call (
this,pra1,pra2,pra3 )

Function.prototype.myCall = function(context) { // 原型中 this 指向的是实例对象,所以这里指向 [Function: bar] console.log(this); // [Function: bar] // 在传入的上下文对象中,创建一个属性,值指向方法 bar context.fn = this; // foo.fn = [Function: bar] // 调用这个方法,此时调用者是 foo,this 指向 foo context.fn(); // 执行后删除它,仅使用一次,避免该属性被其它地方使用 delete context.fn;};let foo = { value: 2};function bar() { console.log(this.value);}// bar 函数的声明等同于:var bar = new Function("console.log(this.value)");bar.call(foo); // 2;

 

本身没什么好说的,显示的肯定是小王 , 男 ,
今年24。那么如何用xw的say方法来显示xh的数据呢。对于call可以这样:

apply ( 在其中运行函数的作用域,参数数组)  →  call (
this,[pra1,pra2,pra3] )

call 的源码实现

call不仅绑定this,还马上执行,并接受可变参数

xw.say.call(xh);

初步思路有个大概,剩下的就是完善代码。

 

对于apply可以这样:

// ES6 版本Function.prototype.myCall = function(context, ...params) { // ES6 函数 Rest 参数,使其可指定一个对象,接收函数的剩余参数,合成数组 if (typeof context === 'object') { context = context || window; } else { context = Object.create(null); } // 用 Symbol 来作属性 key 值,保持唯一性,避免冲突 let fn = Symbol(); context[fn] = this; // 将参数数组展开,作为多个参数传入 const result = context[fn](...params); // 删除避免永久存在 delete(context[fn]); // 函数可以有返回值 return result; }// 测试var mine = { name: '以乐之名'}var person = { name: '无名氏', sayHi: function(msg) { console.log('我的名字:' + this.name + ',', msg); }}person.sayHi.myCall(mine, '很高兴认识你!'); // 我的名字:以乐之名,很高兴认识你!
var person = {
    firstname: 'darren',
    lastname: 'ji',
    getFullName: function(){
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

//在浏览器中这里的this就是指向window
var logName = function(arg1, arg2){
    console.log(this.getFullName());
    console.log('Arguments: ' + arg1 + ' ' + arg2);
}

//darren ji
//Arguments: en es
logName.call(person, 'en','es');
xw.say.apply(xh);

知识点补充:

 

而对于bind来说需要这样:

ES6
新的原始数据类型Symbol,表示独一无二的值;Object.create(null)创建一个空对象

apply不仅绑定this,也马上执行,并接受数组

xw.say.bind(xh)();
// 创建一个空对象的方式// eg.A let emptyObj = {};// eg.Blet emptyObj = new Object();// eg.Clet emptyObj = Object.create(null);

 

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。那么call和apply有什么区别呢?我们把例子稍微改写一下。

使用Object.create(null)创建的空对象,不会受到原型链的干扰。原型链终端指向null,不会有构造函数,也不会有toString、hasOwnProperty、valueOf等属性,这些属性来自Object.prototype。有原型链基础的伙伴们,应该都知道,所有普通对象的原型链都会指向Object.prototype。

var person = {
    firstname: 'darren',
    lastname: 'ji',
    getFullName: function(){
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

//在浏览器中这里的this就是指向window
var logName = function(arg1, arg2){
    console.log(this.getFullName());
    console.log('Arguments: ' + arg1 + ' ' + arg2);
}

//darren ji
//Arguments: en es
logName.apply(person, ['en', 'es']);
var xw={
    name: "小王",
    gender: "男",
    age: 24,
    say: function(school,grade){
        alert(this.name+" , "+this.gender+" ,今年"+this.age+" ,在"+school+"上"+grade);
    }
}
var xh={
    name: "小红",
    gender: "女",
    age: 18
}

所以Object.create(null)创建的空对象比其它两种方式,更干净,不会有Object原型链上的属性。

 

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。对于call来说是这样的

ES5 版本:

xw.say.call(xh,"实验小学","六年级");       

自行处理参数;自实现Symobo

而对于apply来说是这样的

// ES5 版本// 模拟Symbolfunction getSymbol(obj) { var uniqAttr = '00' + Math.random(); if (obj.hasOwnProperty(uniqAttr)) { // 如果已存在,则递归自调用函数 arguments.callee(obj); } else { return uniqAttr; }}Function.prototype.myCall = function() { var args = arguments; if (!args.length) return; var context = [].shift.apply(args); context = context || window; var fn = getSymbol(context); context[fn] = this; // 无其它参数传入 if (!arguments.length) { return context[fn]; } var param = args[i]; // 类型判断,不然 eval 运行会出错 var paramType = typeof param; switch(paramType) { case 'string': param = '"' + param + '"' break; case 'object': param = JSON.stringify(param); break; } fnStr += i == args.length - 1 ? param : param + ','; // 借助 eval 执行 var result = eval(fnStr); delete context[fn]; return result;}// 测试var mine = { name: '以乐之名'}var person = { name: '无名氏', sayHi: function(msg) { console.log('我的名字:' + this.name + ',', msg); }}person.sayHi.myCall(mine, '很高兴认识你!'); // 我的名字:以乐之名,很高兴认识!
xw.say.apply(xh,["实验小学","六年级"]);

apply 的源码实现

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。那么bind怎么传参呢?它可以像call那样传参。

call的源码实现,那么apply就简单,两者只是传递参数方式不同而已。

xw.say.bind(xh,"实验小学","六年级")();
Function.prototype.myApply = function(context, params) { // apply 与 call 的区别,第二个参数是数组,且不会有第三个参数 if (typeof context === 'object') { context = context || window; } else { context = Object.create(null); } let fn = Symbol(); context[fn] = this; const result context[fn](...params); delete context[fn]; return result;}

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

bind
的源码实现bind与call/apply的区别就是返回的是一个待执行的函数,而不是函数的执行结果;bind返回的函数作为构造函数与new一起使用,绑定的this需要被忽略;

xw.say.bind(xh)("实验小学","六年级");

调用绑定函数时作为this参数传递给目标函数的值。
如果使用new运算符构造绑定函数,则忽略该值。 —— MDN

Function.prototype.bind = function(context, ...initArgs) { // bind 调用的方法一定要是一个函数 if (typeof this !== 'function') { throw new TypeError('not a function'); } let self = this; let F = function() {}; F.prototype = this.prototype; let bound = function(...finnalyArgs) { // 将前后参数合并传入 return self.call(this instanceof F ? this : context || this, ...initArgs, ...finnalyArgs); } bound.prototype = new F(); return bound;}

不少伙伴还会遇到这样的追问,不使用call/apply,如何实现bind?

骚年先别慌,不用call/apply,不就是相当于把call/apply换成对应的自我实现方法,算是偷懒取个巧吧。

本篇call/apply/bind源码实现,算是对之前文章系列知识点的一次加深巩固。

“心中有码,前路莫慌。”

来自:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图