Javascript——bind的模拟实现

一、开始

假设我们有一个函数,一个对象

var foo = {
    value:1
}
function bar(name,age){
    this.hobby = ‘shopping‘;
    console.log(this.value);
    console.log(name);
    console.log(age);
}
bar.prototype.friend = ‘kevin‘;

我们试一试用原生的bind可以输出什么

var bindFoo = bar.bind(foo, ‘daisy‘);
var obj = new bindFoo(‘18‘);

可以看到指定原型链,指定了this,bind的同时可以传参数

①指定this,bind的同时穿参数:

我们知道bind返回一个函数并绑定了this,这个模拟起来比较简单

Function.prototype.binds = function(dir){
     var self = this;
     var _args = [].slice.call(arguments,1);
     return function(){
          var args = _args.cancat([].slice.call(arguments));
         self.apply(dir,args);
     }
}

②指定原型链的指向,即prototype的指向:

Function.prototype.binds = function(dir){
     var self = this;
     var _args = [].slice.call(arguments,1);

     var inn = function(){
          var args = _args.concat([].slice.call(arguments));
          self.apply(dir,args);
     }  

     inn.prototype = new dir();
     inn.prototype.constructor = inn;

     return inn;
} 

到这里,如果不去new出一个实例的话,都可以了,如果需要new出一个实例来,我们就需要重新指定下this,因为如果使用new操作符会把this指向新创建的对象,但我们还是需要他指向原本指向的对象,所以,我们要判断当前调用对象是否为原对象的一个实例属性,修改后的代码为:

Function.prototype.binds = function(dir){
     var self = this;
     var _args = [].slice.call(arguments,1);

     var inn = function(){
          var args = _args.concat([].slice.call(arguments));
         self.apply(this instanceof self ? this : dir,args);
     }  

     inn.prototype = new self();
     inn.prototype.constructor = inn;

     return inn;
} 

到底,我们应该已经完成了对bind的模拟,输出看下结果:

多出的几个undefined是在new时产生的

时间: 2024-10-09 21:33:47

Javascript——bind的模拟实现的相关文章

javascript bind

最近在代码中经常看到bind关键词,之前没用过啊,这里记录下.从微软复制过来的例子: // Define the original function. var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value <= this.maximum; } // The range ob

简要谈谈javascript bind 方法

最近去参加了场面试,跟面试官聊了很多JS基础上的东西,其中有个问题是谈谈对apply.call.bind的理解和区别.顿时一愣,apply.call我知道,经常用的东西,bind是什么鬼!!!好像见过,也瞅过类似的文章,但是...不记得了...难道和jQuery的事件绑定的bind一样... 既然不知道,那就整理总结下啰~ 一.apply和call 提到提到了这,就大概做下笔记.在javascript中,this的指向是一个经常要处理的问题, 而apply和call就是用来处理函数在执行时,函数

JavaScript Bind趣味解答

首先声明一下,这个解答是从Segmentfault看到的,挺有意思就记录下来.我放到最下面: bind() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Function.prototype.bind 这个方法是 ECMAScript 5 新增加的,在 Firefox 4/Chrome 中都支持,IE8 应该还不支持. 简介: 创建一个 Function

JavaScript利用装饰模拟实现私有状态

在经典的面向对象编程中,经常需要将对象的某个状态封装或隐藏在对象内,只有通过对象的一幅幅和能访问这些状态,对外只暴露一些重要的状态变量可以直接读写. 我们可以通过将变量(或参数)装饰在一个构造函数内来模拟实现私有实例字段,调用构造函数会创建一个实例. function Range(from,to){ //不要将商战保存为对象的属性,相反 //定义存取器函数来返回端点的值 //这些值都保存在闭包中 this.from=function(){return from;} this.to=functio

使用javascript和css模拟帧动画的几种方法浅析

我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1.我们希望这段帧动画只循环播放所指定的次数. 2.我们希望帧动画结束的瞬间执行某种操作.这个在游戏中大量存在. 3.我们想自如的控制播放的速度. 4.我们想尽可能让这个帧动画的实现方式兼容大部分浏览器,在移动和pc端都能运行良好. 有了以上四点要求,那就不是gif图片所能完成的了.下面,我们先探讨有

JavaScript或jQuery模拟点击超链接和按钮

有时候我们需要页面自动点击超链接或者按钮,可以用js或者jQuery利用程序去点击,方法很简单,按钮或超链接代码如下: 1 <a href="url" target="_blank" onclick="closewin();" id="alink">点击超链接</a> 2 <button id="btn" onclick="test()">点击按钮&l

javascript bind()

前几天看到一个面试题,题目是这样的: 请你说说对javascript中apply,call,bind的理解? 首先apply和call是老生常谈的东西,但是对于bind,我愣了下,因为这个词是jquery中使用频率很高的一个方法,用来给DOM元素绑定事件用的. 为了搞清这个陌生又熟悉的bind,google一下,发现javascript1.8.5版本中原生实现了此方法,目前IE9+,ff4+,chrome7+支持此方法,opera和safari不支持(MDN上的说明). bind的作用和appl

javascript中如何模拟“类”

javascript作为弱类型的放言,没有类似于java,c#中“类”的概念,但实际开发中很多时候会有这样的需求,目前知道有两种方式可以模拟.    1.通过声明一个对象的方式,可有如下代码: var people = { age:12, name:"jack", sex:"男", setAge:function(value){ this.age = value; }, getAge:function(){ return this.age; }, setName:f

javascript使用闭包模拟私有属性和方法

最近因为做了一个项目,其中涉及到了js的静态方法和私有方法,这个概念在其语言里面是很常见的,很多语言都有static这个关键字,只要在一个类的前面加上static就表示申明了一个静态类,但是javascript在面向对象的方面没有那么多的特征,他没有专门的static关键字,也没有其他语言的private这样的访问修饰符.要做到这一点就必须使用js自己的一些特性来变相的完成. 首先javascript里面有一个高级特性叫闭包,简单的说js的闭包可以理解成是一种现象或者特性,一般出现在两个函数嵌套