Backbone源码学习之extend

extend函数在backbone大概就20来行代码包括注释,对学习Javascript中“类”的继承很是好的学习资料。

下面先贴出Backbone中的源码,其中涉及到underscore库中几个实用函数_.has();.create();.extend();

// Helper function to correctly set up the prototype chain for subclasses.
// Similar to `goog.inherits`, but uses a hash of prototype properties and
// class properties to be extended.
// 这里使用的函数表达式
var extend = function(protoProps, staticProps) {
// 通过js中this定义,this是运行中确定。方便“类”继承。
var parent = this;
var child; // The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent constructor.
// 如果protoProps属性中含有constructor及是一个构造函数,但是这里有不够安全。child即继承这个构造函数。
if (protoProps && _.has(protoProps, 'constructor')) {
child = protoProps.constructor;
} else {
//否则继承this(父类的构造函数)
child = function(){ return parent.apply(this, arguments); };
} // Add static properties to the constructor function, if supplied.
//给子类增加静态属性(方法)
_.extend(child, parent, staticProps); // Set the prototype chain to inherit from `parent`, without calling
// `parent`'s constructor function and add the prototype properties.
//创造一个空对象获取父类的原型对象和增加原型对象,赋值给子类的原型对象,丰富子类原型对象。
child.prototype = _.create(parent.prototype, protoProps);
// 调整子类constructor使其指向正确
child.prototype.constructor = child; // Set a convenience property in case the parent's prototype is needed
// later.
// 方便子类调用父类原型对象上的方法
child.__super__ = parent.prototype;
// 返回子类
return child;
};

  


通看backbone中的extend使用最常Javascript的继承方式,构造函数继承对象的属性,原型对象中继承方法(减少内存)。下面看一个JS中最常见的继承实例。

//创建一个Person“类”
var Person = function(name,age,job){
this.name = name;
this.age = age;
this.job = job;
} //Person.prototype原型对象
Person.prototype={
sayName:function(){
alert(this.name);
},
constructor:Person //重写constructor确保指向正确
}; //继承
var Man = function(name,age,job,sex){
Person.apply(this,argument);//通过函数apply的方法使this.age,this.name,this.job中的this指向到Man实例化的对象中
this.sex=sex;
} //原型对象的继承
//方法一,这种方法重复构造函数一次
Man.prototype = new Person();
//方法二,创建一个空构造函数
var F = function(){};
F.prototype = new Person();
Man.prototype = new F();
Man.prototype.constructor = Man;

当然这种方式肯定没有Backbone中的extend优雅也没有他的健壮!

:first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; max-width: 100%; height: auto !important; margin: 2px 0; } table { border-collapse: collapse; border: 1px solid #bbbbbb; } td, th { padding: 4px 8px; border-collapse: collapse; border: 1px solid #bbbbbb; } @media only screen and (-webkit-max-device-width: 1024px), only screen and (-o-max-device-width: 1024px), only screen and (max-device-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { html, body { font-size: 17px; } body { line-height: 1.7; padding: 0.75rem 0.9375rem; color: #353c47; } h1 { font-size: 2.125rem; } h2 { font-size: 1.875rem; } h3 { font-size: 1.625rem; } h4 { font-size: 1.375rem; } h5 { font-size: 1.125rem; } h6 { color: inherit; } ul, ol { padding-left: 2.5rem; } blockquote { padding: 0 0.9375rem; } }
-->

上一篇:C++ 头文件系列(streambuf)


下一篇:JAVA 从GC日志分析堆内存 第七节