如何手动实现es5中的bind方法详解

前言

this的指向在javascript中一直是个谜一样的存在，但是很多地方又会用到this，所以理解和使用this非常重要，关于this的理解这篇文章不做介绍，因为这篇的目的是改变this的指向。

改变this的指向有三种方法，call，apply，bind。下面先介绍下这三种方法，话不多说了，来一起看看详细的介绍吧

改变this指向

call

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
a.say("at");//at aaa
var tn = {name:"ttt"};
a.say.call(tn,"tt")//tt ttt

可以看到通过call，say方法中的this指向了tn,传参的方式的列举

apply

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])

可以看到通过apply，say方法中的this指向了tn，传参的方式是数组

bind

bind也能改变this的指向，不过和call，apply不同的地方在于，bind只改变this，不会指向函数

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
var tn = {name:"ttt"};
var b = a.say.bind(tn);
b();//ttt

bind 改变this,也是能够继承原型链的，看下下面的代码

var to = {name:"to",color:"red"};
function Animal(){
 console.log(`name:${this.name}...color:${this.color}`);
}
Animal.prototype.say = function(){
 console.log(`say..name:${this.name}...color:${this.color}`);
}
var Cat = Animal.bind(to);
Cat();//name:to...color:red
var cat = new Cat();// name:undefined...color:undefined
cat.say();//say..name:undefined...color:undefined

因为cat是Cat的实例，Cat是改变了this的Animal，所以cat也是Animal的实例，但是this是指向cat的，所以this.name是undefined

实现bind

Function.prototype.bind = function(obj){
 const args = Array.prototype.slice.call(arguments,1);//保留bind时的参数
 const that = this;
 const bound = function(){
  const inArgs = Array.prototype.slice.call(arguments);//执行bind的函数时的参数
  const newArgs = args.concat(inArgs);//组装参数
  that.apply(obj,newArgs);//执行bind的函数
 }
 //继承prototype--寄生组合式继承
 function F(){};
 F.prototype = that.prototype;
 bound.prototype = new F();
 return bound;
}

然后执行上面的代码

Cat();//name:to...color:red
var cat = new Cat();//name:to...color:red
cat.say();//say..name:undefined...color:undefined

不过第二行和原生的bind还是有点区别的，这里还是记住了之前的bind的对象，原生的不知道为啥是undefined

面试题

实现es5中的bind方法，使得下面的代码输出success

function Animal(name,color){
 this.name = name;
 this.color = color;
}
Animal.prototype.say = function(){
 return `i am a ${this.color} ${this.name}`
}
const Cat = Animal.bind(null,"cat");
const cat = new Cat("white");
if(cat.say() === 'i am a white cat' && cat instanceof Cat && cat instanceof Animal){
 console.log("success")
}

加上上面的bind实现，咦？？没有出现success？？为什么？

分析一下代码，bind的第一个参数是null??null的时候应该默认为this，修改代码如下

Function.prototype.bind = function(obj){
 const args = Array.prototype.slice.call(arguments,1);//保留bind时的参数
 const that = this;
 const bound = function(){
  const inArgs = Array.prototype.slice.call(arguments);//执行bind的函数时的参数
  const newArgs = args.concat(inArgs);//组装参数
  const bo = obj || this;
  that.apply(bo,newArgs);//执行bind的函数
 }
 //继承prototype--寄生组合式继承
 function F(){};
 F.prototype = that.prototype;
 bound.prototype = new F();
 return bound;
}

输出success

完美~~~

撒花~~~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 关于原生js中bind函数的简单实现

    今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ

  • javascript中利用柯里化函数实现bind方法【推荐】

    • 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

  • javascript中利用柯里化函数实现bind方法

    柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @param con

  • ECMAScript5(ES5)中bind方法使用小结

    一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不同的是,call和apply一样,直接引用在方法上,而bind绑定this后返回一个方法,但内部核心还是apply. 直接看例子: 复制代码 代码如下: var obj = {   a: 1,   b: 2,   getCount: function(c, d) {     return this.

  • 浅析Javascript中bind()方法的使用与实现

    在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write;  altwrite("hello");  //1.以上代码有什么问题 //2.正确操作是怎样的 //3.bind()方法怎么实现 对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示非法调用异常,正确的方案就是使用bind()方法: altwrite.bind(document

  • Javascript中从学习bind到实现bind的过程

    bind是什么 bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列. var result = fun.bind(thisArg[, arg1[, arg2[, ...]]]) result(newArg1, newArg2...) 没看懂没事接着往下看. bind到底做了什么 从上面的介绍中可以看出三点.首先调用bind方法会返回一个新的函数(这个新的函数的函数体应该和fun是一样的).同时bind中传递两个参

  • 如何手动实现es5中的bind方法详解

    前言 this的指向在javascript中一直是个谜一样的存在,但是很多地方又会用到this,所以理解和使用this非常重要,关于this的理解这篇文章不做介绍,因为这篇的目的是改变this的指向. 改变this的指向有三种方法,call,apply,bind.下面先介绍下这三种方法,话不多说了,来一起看看详细的介绍吧 改变this指向 call var a = { name:"aaa", say(type){ console.log(type,this.name); } } a.s

  • Angular中的$watch方法详解

    在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介 在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

  • Android中SQLite 使用方法详解

    Android中SQLite 使用方法详解

    Android中SQLite 使用方法详解 现在的主流移动设备像android.iPhone等都使用SQLite作为复杂数据的存储引擎,在我们为移动设备开发应用程序时,也许就要使用到SQLite来存储我们大量的数据,所以我们就需要掌握移动设备上的SQLite开发技巧.对于Android平台来说,系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取. 下面就向大家介绍一下SQLite常用的操作方法,为了方便,我将代码写在了Activity的onCreate中: @Ov

  • 关于redux-saga中take使用方法详解

    本文介绍了关于redux-saga中take使用方法详解,分享给大家,具体如下: 带来一个自己研究好久的API使用方法. redux-saga中effect中take这个API使用方式,用的多的是call,put,select,但take这个平常还真没什么机会用上,也不清楚在哪里使用才好,不管怎么样,既然是redux-saga写出来的,肯定是有他的用法的,不管37 21,先学会使用方法再说. 先看看介绍: take take的表现同takeEvery一样,都是监听某个action,但与takeE

  • angularjs中的$eval方法详解

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值 想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

  • Python中格式化format()方法详解

     Python中格式化format()方法详解 Python中格式化输出字符串使用format()函数, 字符串即类, 可以使用方法; Python是完全面向对象的语言, 任何东西都是对象; 字符串的参数使用{NUM}进行表示,0, 表示第一个参数,1, 表示第二个参数, 以后顺次递加; 使用":", 指定代表元素需要的操作, 如":.3"小数点三位, ":8"占8个字符空间等; 还可以添加特定的字母, 如: 'b' - 二进制. 将数字以2为基

  • Android 中 onSaveInstanceState()使用方法详解

    Android 中 onSaveInstanceState()使用方法详解 覆盖onSaveInstanceState方法,并在onCreate中检测savedInstanceState和获取保存的值 @Override protected void onSaveInstanceState(Bundle outState) { outState.putInt("currentposition", videoView.getCurrentPosition()); super.onSave

  • Hybris在idea中debug配置方法详解

    1.启动hybris服务的命令用 hybrisserver.bat debug 2.在idea中配置remote debug 端口号默认不变选择所要监听的服务(如下图) 点击小爬虫启动debug服务访问接口时,即可用debug调试程序了! 总结 到此这篇关于Hybris在idea中debug配置方法详解的文章就介绍到这了,更多相关Hybris在idea中debug配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • java9在interface中定义私有方法详解

    一.Java 9接口定义私有方法 从Java 9开始,我们可以在Interface接口中添加private的私有方法和私有静态方法.这些私有方法将改善接口内部的代码可重用性.例如,如果需要两个默认方法来共享代码,则私有接口方法将允许它们共享代码,但不将该私有方法暴露给它的实现类调用(后文中会给大家举一个例子). 在接口中使用私有方法有四个规则: 接口中private方法不能是abstract抽象方法.因为abstract抽象方法是公开的用于给接口实现类实现的方法,所以不能是private. 接口

  • Python3.9.1中使用match方法详解

    Python3.9.1中使用match方法详解

    接触编程的朋友都听过正则表达式,在python中叫re模块,属于文字处理服务里面的一个模块.re里面有一个方法叫match,接下来的文章我来详细讲解一下match. 作为新手,我建议多使用帮助文档,也就是help(re),来获取对re的说明.也可以尝试打开模块对应的py文件,细致地了解实现方法. 当然那是后话,饭得一口一口吃. 本文的主角是match,match的作用主要是从字符串起始位置匹配一个模式,如果成功则返回一个对象,失败则为None. 而match的语法是这样:match(patter

随机推荐