>  기사  >  웹 프론트엔드  >  javascript_javascript 기술의 프로토타입 상속에 대한 간략한 토론

javascript_javascript 기술의 프로토타입 상속에 대한 간략한 토론

WBOY
WBOY원래의
2016-05-16 17:51:351056검색

소스 코드를 참조하세요:

코드 복사 코드는 다음과 같습니다:

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

먼저 ext를 살펴보세요. (4.1의 1896행에서 시작) 프로토타입 상속.
코드 복사 코드는 다음과 같습니다.

var TemplateClass = function(){};
var ExtObject = Ext.Object = {
체인: 함수(객체) {
TemplateClass.prototype = object;
var result = new TemplateClass()
TemplateClass.prototype = null;
return result;
}
}

여기서 객체의 프로토타입이 지워집니다.
jquery에서 상속이 어떻게 작동하는지 다시 살펴보겠습니다.
코드 복사 코드는 다음과 같습니다.

var jQuery = function( selector, context ) {
return new jQuery.fn.init( 선택기, 컨텍스트, rootjQuery )
};
jQuery.fn = jQuery.prototype = {
생성자: jQuery,
init: function( selector, context, rootjQuery ) {
--------------- -- ------
}
}
------
jQuery.fn.init.prototype = jQuery .fn ;

jquery는 더 발전되었으며 jQuery.fn.init의 도움으로 완료될 수 있지만 아이디어는 동일합니다.
Situ Zhengmei의 질량도 lang_fix.js의 17번째 줄에 유사한 상속이 있습니다.

코드 복사 코드는 다음과 같습니다. :
create: function(o){
if (arguments.length > 1) {
$.log(" Object.create 구현은 첫 번째 매개변수만 허용합니다.")
}
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(프로토타입, 속성) {
var object;
if (prototype === null) {
object = { "__proto__": null }
} else {
if (프로토타입 유형 != "object") {
throw new TypeError("typeof 프로토타입[" (typeof 프로토타입) "] != 'object'")
var Type = function () {}; 프로토타입 ;
object = new Type();
// IE에는 `Object.getPrototypeOf`의 내장 구현이 없습니다.
// `__proto__`도 아니지만 이 `__proto__`는
// `Object.getPrototypeOf`가
// `Object.create`를 사용하여 생성된 객체에서 예상대로 작동하도록 보장합니다.
object.__proto__ = 프로토타입
}
if (properties !== void 0) {
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", {});
객체에 "sentinel"을 반환합니다.
} catch(예외) {
// false를 반환합니다.
}
}
// 정의된 속성이 제공되면 작동하는지 확인합니다. 그렇지 않으면
// 부분적으로 심합니다.
if (Object.defineProperty) {
var 정의PropertyWorksOnObject = doesDefinePropertyWork({});
var DefinePropertyWorksOnDom = 문서 유형 == "정의되지 않음" ||
doesDefinePropertyWork(document.createElement("div"));
if (!definePropertyWorksOnObject || !definePropertyWorksOnDom) {
var 정의PropertyFallback = Object.defineProperty;
}
}
if (!Object.defineProperty || 정의PropertyFallback) {
var ERR_NON_OBJECT_DESCRIPTOR = "속성 설명은 개체여야 합니다. ";
var ERR_NON_OBJECT_TARGET = "비객체에서 호출된 Object.defineProperty: "
var ERR_ACCESSORS_NOT_SUPPORTED = "이 자바스크립트 엔진에서는 getter 및 setter를 정의할 수 없습니다. "
"";
Object.defineProperty = function DefineProperty(object, property, descriptor) {
if ((typeof object != "object" && typeof object != "function") || object === null) {
새로운 TypeError(ERR_NON_OBJECT_TARGET 개체) 발생;
}
if ((typeof descriptor != "object" && typeof descriptor != "function") || descriptor === null) {
throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR descriptor);
}
// I8의 DOM 요소에 대해 실제 정의 속성
//을 사용하려고 용감하게 시도합니다.
if (definePropertyFallback) {
try {
return definePropertyFallback.call(Object, object, property, descriptor);
} catch(예외) {
// 실제 작동하지 않으면 shim을 사용해 보세요.
}
}
// 데이터 속성인 경우.
if (owns(descriptor, "value")) {
// "writable", "enumerable" 또는 "configurable"
// 요청되었지만 지원되지 않는 경우 자동으로 실패
/*
// 대체 접근 방식:
if ( // 이러한 기능을 구현할 수 없습니다. false는 허용하지만 true는 허용하지 않습니다
!(owns(descriptor, "writable") ? descriptor.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__ = 프로토타입OfObject;
// getter/setter가 객체 자체에 정의될 수 있으므로 어쨌든 속성을 삭제합니다.
//
객체[속성] 삭제;
객체[속성] = 설명자.값;
// 이제 원래 `__proto__`를 다시 설정합니다.
object.__proto__ = 프로토타입;
} else {
객체[속성] = 설명자.값;
}
} else {
if (!supportsAccessors) {
throw new 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. 정의 프로퍼티 = 함수 정의 프로퍼티(객체, 속성) {
for(속성의 var 속성) {
if (owns(properties, property) && property != "__proto__") {
Object.defineProperty(object, 속성, 속성[속성]);
}
}
객체 반환;
};
}

EcmaScript6의 类继承。
复代码 代码如下:

클래스 모듈은 Base {
constructor() {
}
}

越玩越imagejava了 不过es6很多浏览器还不支持。
最后推荐적写법:
复代码 代码如下:

if (!Object.create) {
Object.create = function create(o) {
var F = function(){};
F.prototype = o;
var 결과 = new F();
F.prototype = null;
반환 결과;
}
}
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.