28

我有一个 JavaScript 函数对象;

var addNum = function(num1, num2) {
        return num1 + num2;
}

现在,如果我尝试访问

addNum.divide()

我想了解上述代码的原型链。我读到在上面的例子中,addNum 会被搜索到 divide(),然后是 Function.prototype,最后是 Object.prototype。

但我的问题是在上面的例子中,如何在 addNum 中搜索 divide()

它是否指的是类似的东西;

var addNum = function(num1, num2) {

this.divide = function(){}

            return num1 + num2;
    }

我无法理解它说 addNum 将被搜索到 divide() 的那一行

请帮助我理解相同。

4

5 回答 5

55

我不确定这会回答你的问题,但可能会给你一些见解。考虑以下示例:

var Person = (function () {
    var Person = function (name) {
        this.name = name;
    }

    Person.greet = function () {
        console.log("Hello!");
    }

    Person.prototype = {
        greet: function () {
            console.log('Hello, my name is ' + this.name);
        }
    };
    return Person;
})();

var bob = new Person("Bob");

Person.greet(); // logs "Hello!"
bob.greet(); // logs "Hello, my name is Bob

函数对象“Person”有一个直接的“greet”属性,它是一个函数。OOP 方面,您几乎可以将其视为可以直接从 Person 函数 (Person.greet()) 调用的静态方法。一旦您从 Person 构造函数“实例化”了一个人对象,该新对象“bob”现在从 Person.prototype 对象引用它的方法。现在当你调用 bob.greet() 时,它会使用原型对象中的 greet 函数。

希望有帮助。

于 2013-03-02T12:18:51.403 回答
24

正如您自己所说:您有一个函数object。函数是 JS 中的对象,就像对象字面量、数组或其他任何东西一样:可以随意为函数分配属性和方法:

var someAnonFunction = function(foo)
{
    console.log(this);
    console.log(this === someAnonFunction);//will be false most of the time
};
someAnonFunction.x = 123;//assign property
someAnonFunction.y = 312;
someAnonFunction.divide = function()
{
    console.log(this === someAnonFunction);//will be true most of the time
    return this.x/this.y;//divide properties x & y
};
someAnonFunction.divide();

在这种情况下,被引用的函数对象someAnonFunction被分配了对匿名函数的引用,被称为divide(好吧,对匿名函数的引用无论如何都被称为除法)。所以这里根本没有原型参与。请注意,正如您自己所说:所有对象都可以追溯到Object.prototype,试试这个:

console.log(someAnonFunction.toString === Function.prototype.toString);//functions are stringified differently than object literals
console.log(someAnonFunction.hasOwnProperty === Object.prototype.hasOwnProperty);//true

或者,也许这更清楚:如何将方法/属性调用解析为 JS 中的值的简单方案:

[      F.divide      ]<=========================================================\ \
F[divide] ===> JS checks instance for property divide                           | |
 /\ ||                                                                          | |
 || || --> property found @instance, return value-------------------------------| |
 || ||                                                                          | |
 || ===========> Function.prototype.divide could not be found, check prototype  | |
 ||      ||                                                                     | |
 ||      ||--> property found @Function.prototype, return-----------------------| |
 ||      ||                                                                     | |
 ||      ==========> Object.prototype.divide: not found check prototype?        | |
 ||          ||                                                                 | |
 ||          ||--> property found @Object.prototype, return---------------------|_|
 ||          ||                                                                 |=|
 ||          =======>prototype is null, return "undefined.divide"~~~~~~~~~~~~~~~|X|
 ||                                                                             \ /
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~< TypeError can't read property 'x' of undefined

因此,如果您希望上面的代码使用原型工作,您将不得不增加各种原型(在本例中为Function.prototype)。确实不建议这样做,实际上更改“本机”原型通常是不受欢迎的。仍然:

Function.prototype.divide = function (a, b)
{
    a = +(a || 0);//coerce to number, use default value
    b = +(b || 1) || 1;//division by zeroe is not allowed, default to 1
    return a/b;
};
function someFunction ()
{
    return 'someString';
};
var another = function(a, b)
{
    return a + b;
};
someFunction.divide(12, 6);//will return 2
another.divide(12, 4);//3

someFunction在这两种情况下,将扫描由名称 (或)引用的函数对象以查找未找到another的名为 的属性。divide然后,它会扫描Function.prototype找到此类属性的 .
如果不是这样,JS 也会检查Object.prototype,如果失败,它最终会抛出一个错误。

不久前,我在这个主题上发布了相当长的答案:

是什么让 my.class.js 如此之快?(处理原型链)
javascript 中的对象和函数(函数 <=> 对象 <=> 构造函数的回顾) JavaScript
中这三种“类”定义模式之间有什么区别?(还有更多信息)
Javascript - 动态更改函数的内容(模糊地涉及匿名函数,分配给变量和属性并更改它们的上下文)

于 2013-03-02T12:31:51.907 回答
3

您可以创建divide为 [sort of a]static方法:

var addNum = function(num1, num2) {
  addNum.divide = function(){return num1/num2;};
  return num1 + num2;
}
// now you first have to run addNum
var onethirds = addNum(1,3); //=> 4
addNum.divide(); //=> 0.333333...

但这是不可取的。更好地创建一个构造函数:

function Pair(n1,n2){
   n1 = n1 || 1;
   n2 = n2 || 1;
   // create instance methods
   this.add      = function(){return n1+n2;};
   this.divide   = function(){return n1/n2;};
   this.multiply = function(){return n1*n2;}
}
var pair1 = new Pair(2,6)
   ,pair2 = new Pair(1,2);
pair1.add();    //=> 8
pair2.divide(); //=> 0.5
//etc.

或者更原型的方法(方法被添加到构造函数原型,而不是每个实例):

function Pair(n1,n2){
   this.n1 = n1 || 1;
   this.n2 = n2 || 1;
   // create prototype methods (once)
   if (!Pair.prototype.add){
    var proto      = Pair.prototype;
    proto.add      = function(){return this.n1+this.n2;};
    proto.divide   = function(){return this.n1/this.n2;};
    proto.multiply = function(){return this.n1*this.n2;}
   }
}

读东西

于 2013-03-02T12:34:54.960 回答
2

addNum不,您的最后一个代码仅在您用作构造函数时才有意义:

var instance = new addNum();
instance.divide();

但是,因为函数是对象,所以以下内容是有效的:

var addNum = function(num1, num2) {
        return num1 + num2;
}
addNum.divide = function() {}

在这种情况下divide,将是其addNum自身的属性,而不是其原型之一。

于 2013-03-02T12:24:42.553 回答
0

起初理解原型继承有些晦涩,但顾名思义,JavaScript 中有一些原型,Function 就是其中之一。

每当您创建一个新函数时,您都可以使用命令检查其类型typeof。在你的情况下:

var a = function(a,b) { return a + b; }

它将返回"function",因此有两种方法可以向您的a变量添加更多方法。正如@Keith Morris 建议的那样,一种方法是创建一个新的构造函数并将其方法放入其中并返回它。这也是首选方式,因为这样您就不会使用原型方法污染基本对象,这些原型方法扩展到它们所代表的每个对象。

意思是,如果我改为这样做:

Function.prototype.divide = function(a, b) { return a / b; }

我现在可以做a.divide(2, 1);,它会返回2。但是例如,如果我使用jQueryand dojQuery.divide(2,1)我也会得到2,因为它试图在函数的直接范围内找到它。如果没有,它将转到它的原型。

希望这能更好地向您解释。

于 2013-03-02T12:25:53.803 回答