淺談javascript的原型繼承_javascript技巧-js教程-PHP中文網

請看原始碼：

 
function clone(o) { var F = function(){}; 
F.prototype = o; 
return new F(); 
}

先看ext（4.1的1896行開始）的原型式繼承。

複製程式碼程式碼如下:

var TemplateClass = function(){}; var ExtObject = Ext.Object = { 
chain: function (object) { 
TemplateClass.prototype = object; 
var result = new TemplateClass(); 
TemplateClass.prototype = null; return result; 
} 
} 

 
這裡清除了object的prototype。 
再看一下jquery是怎麼玩的繼承。 

複製程式碼程式碼如下: var jQuery = function( 🎜>

var jQuery = function( 🎜>
 
var jQuery = function( ？ >return new jQuery.fn.init( selector, context, rootjQuery ); 
}; 
----------------------- 
 jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
----------------- ------ 
} 
} 
------------------- 
jQuery.fn.init.prototype = jQuery.fn ; 

jquery玩的就比較高，借助jQuery.fn.init來完成，但是思路一樣。
司徒正美的mass裡也有類似的繼承，在lang_fix.js裡面第17行：

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼複製程式碼

 程式碼如下:

create: function(o){ 
if (arguments.length > 1) { 
$.log(" Object.create implementation only accepts the first parameter.") 
} 
function F() {} 
F.prototype = o; 
return new F(); 
} 

查看了一下es5的官方，找到了他的相容補丁：

複製代碼

 代碼如下:

// ES5 15.2. 3.5 
// http://es5.github.com/#x15.2.3.5 
if (!Object.create) {

Object.create = function create(prototype, properties) {
var object;
if (prototype === null) {

object = { "__proto__": null }; } else { if (typeof prototype != "object") { throw new TypeError("typeof prototype[" (typeof prototype) "] != 'object'"); } var Type = function () {}; Type.prototype = prototype;

object = new Type(); // IE has no built-in implementation of `Object.getPrototypeOf` // neither `__proto__`, but this manually setting `__proto__ / // objects created using `Object.create` object.__proto__ = prototype; } object.__proto__ = prototype; Object.defineProperties(object, properties); } return object; }; } 上面考慮的就比較全面的程式碼考慮的就比較全面的程式碼，但是需要另外引入Object.defineProperties的補丁才行，原始碼相對就比較多了。複製程式碼程式碼如下:

 
// ES5 15.2.3.6 
// http://es5.github.com/#x15.2.3.6 
// WebKit 和IE8 標準模式修補程式
//由hax  設計
// 相關問題：https://github.com/kriskowal/es5-shim/issues#issue/5 
// IE8 參考：
// http ://msdn.microsoft.com/ en-us/library/dd282900.aspx 
// http://msdn.microsoft.com/en-us/library/dd229916.aspx 
// WebKit 錯誤： 
// https:// bugs.webkit.org/show_bug.cgi?id=36423 
function doesDefinePropertyWork(object) { 
try { 
Object.defineProperty(object, "sentinel", {sen. }); 
傳回物件中的「哨兵」； 
} catch (異常) { 
// 回傳falsy 
} 
} 
// 如果給定，檢查DefineProperty 是否有效。否則，
//部分填充。 
if (Object.defineProperty) { 
var DefinePropertyWorksOnObject = doesDefinePropertyWork({}); 
var DefinePropertyWorksOnDom = 文件類型==「未定義」|| 
doesDefinePropertyWork(document." )); 
if (!definePropertyWorksOnObject || !definePropertyWorksOnDom) { 
var DefinePropertyFallback = Object.defineProperty; 
} 
} 
if (!Object.defineProperty || || >var ERR_NON_OBJECT_DESCRIPTOR = "屬性描述必須是一個物件："; 
var ERR_NON_OBJECT_TARGET = "在非物件上呼叫Object.defineProperty:" 
var ERR_ACCESSORS_NOT_SUPORTED = "JAPORTEDPPORTED"好在此定義。 🎜>"; 
Object.defineProperty = function DefineProperty(物件, 屬性, 描述子) { 
if ((typeof object != "object" && typeof object != "function") || object === null) { 
拋出新的​​TypeError(ERR_NON_OBJECT_TARGET物件); 
} 
if ((描述符類型！= "物件" && 描述子類型！= "函數") || 描述符== = null) { 
拋出新的​​TypeError(ERR_NON_OBJECT_DESCRIPTOR 描述詞); 
} 
// 大膽嘗試對I8 的DOM 元素使用真正的DefineProperty ///。 ) { 
try { 
return DefinePropertyFallback.call(物件, 物件, 屬性, 描述子); 
} catch (異常) { 
// 如果真正的墊片不起作用，請嘗試墊片
} 
} 
// 如果它是資料屬性。 
if (owns(descriptor, "value")) { 
// 如果請求“可寫”、“可枚舉”或“可配置”，則靜默失敗
// 被請求但不支援
/* 
// 替代方法： 
if ( // 無法實作這些功能；允許false 但不允許true 
!(owns(descriptor, "writable") ? detector.writable : true) || 
!(owns(descriptor, "enumerable") ?descriptor.enumerable : true) || 
!(owns(descriptor, "configurable") ?descriptor.configurable : true) 
) 
拋出新的​​RangeError( 
"Object.defineProperty 的此實作不" 
"支援可設定、可枚舉或可寫。" 
); 
*/ 
 if (supportsAccessors && (lookupGetter(object, property) || 
lookupSetter(object, property))) 
{ 
// 因為訪問器僅在實作//`` __proto__` 我們可以在定義
// 屬性時安全地重寫`__proto__`，以確保我們不會碰到繼承的
// 訪問器。 
var 原型 = object.__proto__; 
object.__proto__=prototypeOfObject; 
// 無論如何都要刪除屬性，因為 getter / setter 可能是 
// 在物件本身上定義的。 
刪除物件[屬性]; 
物件[屬性] = 描述符.值; 
// 現在設定原來的`__proto__`。 
object.__proto__ = 原型； 
} else { 
物件[屬性] = 描述子.值; 
} 
} else { 
if (!supportsAccessors) { 
} else { 
if (!supportsAccessors) { 
}拋出新的TypeError(ERR_ACCESSORS_NOT_SUPPORTED); 
} 
// 如果我們做到了這一點，那麼就可以定義getter 和setter 了！ 
if (owns(descriptor, "get")) { 
defineGetter(object, property, Descriptor.get); 
} 
if (owns(descriptor, "set")) { 
defineSetter(object, property, Descriptor.set); 
} 
} 
返回對象； 
}； 
} 
// ES5 15.2.3.7 
// http ://es5.github.com/#x15.2.3.7 
if (!Object.defineProperties) { 
Object. DefineProperties = function DefineProperties(object,properties) { 
for (properties, DefineProperties(object,properties) { 
for (properties, DefineProperties(object,properties) { 
for (properties, DefineProperties(object,properties) { 
for (properties, DefineProperties(object,properties) { 
for (properties, DefineProperties(object,properties) { 
for (properties, 時期) { 
if (owns(properties, property) && property != "__proto__") { 
Object.defineProperty(object,財產，財產[財產]); 
} 
} 
回物件； 
}; 

}

EcmaScript6 的類別繼承。複製程式碼

 程式碼如下：
 
 
class module extends Base {s1. 
} 
} 

越玩越像java了，不過es6很多瀏覽器不支援
最後推薦的寫法：

複製程式碼

程式碼如下：

 
if (!Object.create) { 
Object.create = function create(o) { 
var F = function(){}; 
F.prototype = o; 
var 結果= new F(); 
F.prototype = null; 
回傳結果； 
} 
} 