`
muyu
  • 浏览: 222780 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

请您先登录,才能继续操作

理解prototype.js的bind函数

阅读更多

先看call(或apply)的用处:

var first_object = {
  num: 42
}; 
function multiply(mult) {
  return this.num * mult;
}
 
multiply.apply(first_object, [5]);  //等于 42*5

 

在上面的例子中,multiply是一个function,里面有this,所以,它必须“成为某个对象的方法才能执行”。这里的multiply函数中的this默认为全局的window对象:

function multiply(mult) {
  return this.num * mult;
}
 
window.num = 100;
multiply(4); //等于 400

 

 

由于JavaScript是动态语言,一个对象的方法可以被变成另外的对象的方法,所以,该方法下的this会发生变化。

function multiply(mult) {
  return this.num * mult;
}
 
var book = {
  num : 33
};
book.total = multiply;
book.total(10);

 

换种写法,采用new关键字

function multiply(mult) {
  return this.num * mult;
}

function Book(newNum) {
  this.num = newNum;
}
 
var book = new Book(33);
book.total = multiply;
book.total(10);

 

再看看下面的写法,和平时写的类比较像了:

function Book(newNum) {
  this.num = newNum;
  this.total = function (mult) {
                 return this.num * mult;
               }
}
 
var book = new Book(33);
book.total(10);

 

正因为this指针的不确定性,使得this所属函数定义的 和 实际执行的 上下文环境不同,从而计算出非预期的结果。

 

再看最初的代码示例,我们用js提供的call函数来解决this的问题。可以考虑给function函数原型增加一个bind方法------它只是封装了apply函数,返回值是一个function:

var first_object = {
  num: 42
}; 
function multiply(mult) {
  return this.num * mult;
}

Function.prototype.bind = function(obj) {  //该行可换做 multiply.prototype.bind = function(obj) {
  var method = this;
  return function() {
    return method.apply(obj, arguments);
  };
}

var foo = multiply.bind(first_object);
foo(5);

 (把bind方法建立在multiply的原型上也可,如注释所示)

 

总之,把正确的方法放在正确的对象里,才是bind方法的目的。请参看prototype.js关于bind方法的API:

http://www.prototypejs.org/api/function/bind

下面是prototype.js关于bind的源代码:

  bind: function() {
    if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
      return __method.apply(object, args.concat($A(arguments)));
    }
  },

  

参考网址

http://www.digital-web.com/articles/scope_in_javascript/

 

 

分享到:
评论
2 楼 mhzyb 2013-08-07  
长见识了!
1 楼 michael007java 2011-07-27  
写的不错,逻辑清晰,help me a lot

相关推荐

    prototype.js中文手册

    Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...

    prototype.js 1.4版开发者手册(强烈推荐)

    《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...

    Prototype.js 1.6.0.3 及中文CHM帮助文档

    例如,Prototype.js 提供了 `$.extend()` 方法来实现对象的深复制,以及 `$.each()` 函数用于迭代数组和对象,这些都是JavaScript原生不支持但非常实用的功能。 在Prototype.js 1.6.0.3 版本中,开发者可以利用 `...

    深入理解JS中的Function.prototype.bind()方法

    对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind...

    javascript类库prototype.js

    8. **实用工具**:Prototype.js 还包含许多实用工具函数,如`$()`用于快速获取DOM元素,`$$()`用于选择一组元素,以及`Function.bind()`用于绑定函数上下文等。 9. **性能优化**:Prototype.js 在设计时就考虑了...

    prototype.js开发者手册

    《prototype.js开发者手册》是针对JavaScript库Prototype的一份详尽指南,旨在帮助开发者深入理解和有效利用这个强大的工具。Prototype.js是开源的JavaScript框架,它扩展了JavaScript的基本对象,提供了类和面向...

    prototype 开发应用手册,笔记,prototype.js文件下载

    Prototype是一个强大的JavaScript库,由Sam Stephenson创建,旨在提升JavaScript的开发效率,提供丰富的类和函数扩展,为JavaScript编程带来面向对象的特性。在本手册中,我们将深入探讨Prototype的核心概念、主要...

    prototype.js开发笔记.pdf

    Prototype.js是一个JavaScript库,由Sam Stephenson编写,用于简化JavaScript编程,提供了许多有用的函数和方法,以帮助开发者快速构建Web应用程序。下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象...

    prototype.js开发笔记

    这篇文章可能会介绍更多的 JavaScript 高级概念和技术细节,帮助开发者更好地理解 Prototype.js 的设计原理和使用技巧。 #### 1.3 通用性方法 - **$() 方法**:这是一个非常实用的方法,用于获取 DOM 元素。相比于...

    prototype.js开发手册

    - **函数工具**:Prototype.js 也提供了很多函数级的操作工具,例如`Function.bind()`用于绑定函数的上下文,`Function.prototype.curry()`可以部分应用函数参数。 ### 2. Prototype.js 开发者手册1.4版 在1.4版本...

    prototype.js学习说明

    Prototype.js 是一个 JavaScript 库,它的主要目标是增强和扩展JavaScript的基本功能,使其更适合开发复杂的Web应用程序。在本文中,我们将深入探讨Prototype.js的核心概念、关键功能和改进,特别是集中在1.3.1版本...

    prototype.js1.6的帮助文档

    通过这些实例,你可以了解如何在实际项目中应用上述功能,加深对Prototype.js的理解。 总的来说,Prototype.js 1.6帮助文档是一份全面的学习资源,涵盖了JavaScript开发中的多个重要方面。它提供的工具和方法能够极...

    prototype.js 1.4版开发手册

    通过阅读此手册,开发者不仅可以理解Prototype.js的核心机制,还能掌握如何利用它来构建高性能、易维护的JavaScript应用程序。对于那些希望提升JavaScript编程效率,尤其是处理DOM操作和Ajax通信的开发者来说,强烈...

    prototype.js 1.4版开发者手册

    7. **Function增强**:Prototype.js 对Function原型进行了扩展,添加了bind()方法,可以改变函数的调用上下文,还有defer()用于延迟执行函数。 8. **Prototype对象**:每个JavaScript对象都隐含地继承自Prototype...

    prototype.js源码解度

    `bind`方法是Prototype.js中另一个非常有用的工具,它可以将一个函数绑定到特定的上下文(即`this`关键字),确保函数在被调用时始终以指定的对象作为其上下文。这对于事件处理函数、回调函数等场景特别有用,可以...

    prototype.js开发笔记.doc

    【标题】:Prototype.js开发笔记 【描述】:本文档主要涵盖了Prototype.js库的编程指南,包括其核心概念、通用方法、Ajax对象...这份开发笔记将帮助你理解和利用Prototype.js的强大功能,提升你的JavaScript开发实践。

    理解javascript中的Function.prototype.bind的方法

    理解并使用 Function.prototype.bind 方法可以帮助开发者更好地控制函数调用上下文,以及更有效地处理异步操作和事件处理中函数的 this 绑定问题。通过使用 bind 方法,可以避免使用额外的变量保存 this 上下文,使...

    prototype.js 1.4版开发者手册.doc

    除了上述特性,Prototype.js 还提供了一系列实用函数,比如`Array`和`String`对象的扩展,以及`Function`对象的方法,如`bind()`,使得函数可以与特定上下文关联。 7. **版本差异** 版本1.4相较于1.3有很大的扩充...

    prototype.js

    Prototype.js是一款强大的JavaScript库,主要为了解决JavaScript在浏览器环境中的不一致性,提供了一套优雅的API,使得开发者能够更高效地编写跨浏览器的Ajax应用。作为Ajax技术的核心库,Prototype.js以其丰富的...

Global site tag (gtag.js) - Google Analytics