2014-01-26 97 views
3

作为开发人员使用OOP背景(c#,Java)OOP JavaScript对我来说是野马。我正在学习语言的坚果和螺栓,然后跳上图书馆(我错了吗?);所以,我查了几十本关于对象,函数等的书籍/教程。学习了几种创建对象的方法,但几乎每个JS库中使用的语法让我感到困惑。即JavaScript语法:什么是({})它是一个函数还是对象?

var Person = Backbone.extend.Model({ 
//pretty complex staff 
}) 

什么是模型幕后?目的?功能?

+0

不应该是'Backbone.Model.extend'吗? –

回答

13

这不是正确的主干语法。实际上应该是:

Backbone.Model.extend({ 

}); 

在这种情况下,extend是一个函数。请注意,您使用()来调用它。然而,JavaScript中的函数也是对象(稍后更多)。您可能会对其内部的{}感到困惑。这是因为您将该对象作为参数传递给该函数。

如果extend是一个函数,期望一个字符串作为参数/参数,它看起来像这样:extend('some string')。在这种情况下,它正在采取一个对象。例如:

var someObject = { 
    someProperty: 'someValue' 
} 
var Person = Backbone.Model.extend(someObject); 

是一样的:

var Person = Backbone.Model.extend({ 
    someProperty: 'someValue' 
}); 

这里只是一个怎么可能看在功能样本:

Backbone.Model.extend = function(obj) { 
    console.log(obj.someProperty); //logs "someValue" 
} 

正如我所说的,在JavaScript中,函数也是对象。其实,大部分东西都是物体。我建议你对此进行更多的研究。因为它不是你的问题的重点,我只是简单地表明:

var someObj = { 
    someProperty: '123' 
}; 
console.log(someObj.someProperty); //logs "123" 

var someFunction = function() { 

}; 
someFunction.someProperty = '123'; 
console.log(someFunction.someProperty); //logs "123" 

虽然,这将是更好地加入到原型,以便继承会像这样:

someFunction.prototype.someProperty = '123'; 
var foo = new someFunction(); 
console.log(foo.someProperty); //logs "123" 

Here's a little demo you can mess with (click).

所以..总之,JavaScript是双赢的。

+1

要添加可能会澄清事物的内容,在调用函数之前,将评估作为extend()参数的对象{}。所以你基本上将一组键/值作为参数传递给扩展函数。 – GameAlchemist

2

您确定您输入的内容正确吗?我想你扭转了Modelextend的顺序。我正在查看文档,并且我看到:

模型是任何JavaScript应用程序的核心,包含交互式数据以及围绕它的大部分逻辑:转换,验证,计算的属性和访问控制。您可以使用特定于域的方法来扩展Backbone.Model,并且Model提供了一组用于管理更改的基本功能。

extend函数在许多Javascript库中实现:Backbone,Underscore和jQuery。它所做的是获取一个对象并向其添加方法和实例变量。毕竟在Javascript中,对象只是散列。这创建了一个有几个方法和数据的对象。

var counter = {}; 
counter.count = 0; 
counter.increment = function() { 
    this.count++; 
} 
counter.decrement = function() { 
    this.count--; 
} 

如果你想继承,您使用对象或它的构造函数的prototype财产。 extend方法是一种模拟这种方法。下面是更多的骨干文档:

extendBackbone.Model.extend(属性,[classProperties])

创建模型类你自己的,你扩展Backbone.Model并提供实例属性,以及作为可选的classProperties直接附加到构造函数。

扩展正确设置原型链,因此使用扩展创建的子类可以进一步扩展和子类化,只要你喜欢。

var Note = Backbone.Model.extend({ 

    initialize: function() { ... }, 

    author: function() { ... }, 

    coordinates: function() { ... }, 

    allowedToEdit: function(account) { 
     return true; 
    } 

}); 

在传统的JavaScript中,你会写:在JavaScript

function Note() { 
    this.initialize = function() {...}; 
    this.author  = function() {...}; 
    this.coordinates = function() {...}; 
    this.allowedToEdit = function(account) { 
     return true; 
    }; 
} 

Note.prototype = new Model(); // Inheritance. 

传承让我想起了Perl的格言:有做到这一点的方法不止一种。

+0

是的,我错位扩展:) – brocode

1

欢迎计算器,

我强烈建议你看看Douglas Crockford's Website,也有insightfull videos in YUI Theater - 道格拉斯的那些启动。他是发现JavaScript has good parts的人。我还发现John Resig's Secrets of the JavaScript Ninja非常有益于克服语言(约翰是无所不在的jQuery Library的创造者)。我会进一步建议你看看一些库(和他们的代码 - 我就是这么学的 - 从jQuery开始)。有a ton of other libraries在那里,但一次一步:-)。

现在你的问题: Backbone.Model是一个构造函数,通常你会像Java中使用它new Backbone.Model({ configOption: true, ... })。但像JavaScript一样多汁,它可以让你在引擎盖下做些疯狂的事情。例如,您可以实现自己的OOP类实现,或者您可以像在Scheme或Lisp中那样以功能样式进行编程。你在这里看到的是Backbone自己的子类型包装器(实际上任何体面的JS库都提供了一些方法来实现这一点)。 的代码实际上是做一些沿此线:

// Creating a sub type of the Backbone.Model *class* - it's not really 
// a class like in Java or C# but rather a (constructor) function. 
var Person = Backbone.Model.extend({ 
    defaults: { 
     hasTheOneRing: true 
    }, 
    initialize: function (hasTheOneRing) { 
     // Note that Backbone is implementing getters/setters 
     // under the hood so you can listen for change events later 
     this.set('hasTheOneRing', hasTheOneRing); 
    } 
    // More configuration ... 
}); 

// Person now is a constructor function that creates instances 
// of it's *class* when you create an object with it 
var frodo = new Person(true), 
    sam = new Person(); // Note that you can supply as many arguments as you wish 

// Frodo has the ring 
console.log(frodo.get('hasTheOneRing')); 

// Sam doesn't have the ring (well not all the time) 
console.log(sam.get('hasTheOneRing')); 

// In plain old JavaScript the sub typing mechanism works a little bit like this: 

// A constructor function is just a function 
function Person() { 
    // JS doesn't have the notion of *super* or *base* but you 
    // can emulate the behavior as many libraries do in the wild 
    Backbone.Model.call(this); 
} 

// The prototype of a person is based on that of a Backbone.Model 
Person.prototype = Object.create(Backbone.Model.prototype); 

// Object.create has not been there since the beginning. After 
// Douglas Crockford discovered the good parts this function 
// has been adapted into the standard portfolio of every modern browser 
// what it does is essentially just: 
function create(object) { 
    // There's actually more going on in here but you get the idea 
    function F() {} 
    F.prototype = object; 
    return new F(); 
} 

// So this means almost the same 
Person.prototype = new Backbone.Model(); 

我越来越爱JS的方式就是阅读库代码 - 和Backbone is open source等有读取和迷死感到惊讶。我认为JS只是纯文本传送的事实对于在生态系统中强大的语言产生了巨大的影响,甚至微软也无法阻止它。

给语言一个尝试,当它点击时你很可能会开始喜欢它:-)。

快乐编码!

+0

是的,我真的进入它。这是不同的,同时可爱 – brocode

相关问题