ES5 / ES6 의 계승
/ /
의 관계 --(prototype)--> --(constructor)-->
--(new )--> --(constructor)-->
--(__proto__)-->
instance.__proto__
에서 찾 지 못 하면 __proto__
이 체인 을 따라 위로 찾 습 니 다. Object.prototype
찾 을 때 까지 function Parent() {}
function Child() {
//
Parent.call(this) // this
}
//
Child.prototype = Object.create(Parent.prototype)
// constructor
Child.prototype.constructor = Child
두 가지 주의 점:
Object.create(proto, [propertiesObject])
MDN , __proto__
Object.create(null) //
js
function createObject(P) {
var F = function() {}
F.prototype = P.prototype
return new F()
}
:
prototype constructor ,
, constructor , prototype constructor
,
var c = new C()
c.constructor === Child // false
Child.prototype.constructor === Child // false
c.constructor === Parent // true
Child.prototype.constructor === Parent // true
(c Child ),
ES6 의 계승 은 본질 적 으로 원형 체인 을 빌려 계승 을 실현 한다.
// class extends
class Parent {
static sayAge() {
return '18'
}
constructor(name) {
this.name = 'name'
}
}
class Child extends Parent {
constructor(name, age) {
/**
* constructor super , this ,
* super this ,new
* Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
*
* ES5 this, this (Parent.call(this))
* ES6 , this ( super ), this
*/
super(name, age)
this.age = age
}
}
// :es6 , ES5
// extends ,Child.__proto__ ==== Parent // true
// Parent.__proto__ f() { [native code] }
// Parent.__proto__.__proto__ === Object.prototype
Babel 코드 바 뀐 ES6 계승 코드
// ,
"use strict";
// super
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
);
}
return self;
}
//
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf
? Object.getPrototypeOf
: function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
//
function _inherits(subClass, superClass) {
// ...
// es5
subClass.prototype = Object.create(superClass.prototype, {
constructor: {
value: subClass, // constructor
writable: true,
configurable: true
}
});
// :Child.__proto__ = Parent
// ( ) prototype = Parent,
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf =
Object.setPrototypeOf ||
function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
// ...
var Parent =
/*#__PURE__*/
(function() {
_createClass(Parent, null, [
{
key: "sayAge",
value: function sayAge() {
return "18";
}
}
]);
function Parent(name) {
_classCallCheck(this, Parent);
this.name = "name";
}
return Parent;
})();
var Child =
/*#__PURE__*/
(function(_Parent) {
_inherits(Child, _Parent);
function Child(name, age) {
var _this;
_classCallCheck(this, Child);
// super , super this
_this = _possibleConstructorReturn(this, _getPrototypeOf(Child).call(this, name, age));
/***
* super
* _this.age = age;
* return _possibleConstructorReturn(_this);
* super this,
*
* _this.age = age
* _assertThisInitialized , , super
*/
_this.age = age;
return _this;
}
return Child;
})(Parent);
var c = new Child();
// babel , , super, babel
// : Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
extends
을 통 해 ES6 완 일 봉 call
도 안 된다 위 에서 계승 이 라 고 말 했 는데, 그것 은 실례 가 되 는 조작 부호 이다
new
무슨 원리 예요?var obj = {}
obj.__proto__ = Child.prototype
F.call(obj)
// 1.
// 2. __proto__ prototype ==>
// 3. this obj( ), ===>
원형 체인 과 관련 된 몇 가지 방법
hasOwnProperty
: 이 방법 은 대상 자체 에 어떤 속성 이 있 는 지 찾 을 수 있 을 뿐 원형 체인 에서 찾 지 않 습 니 다 A.isPropertyOf(instanceA)
: A 가 인 스 턴 스 A 의 원형 대상 인지 아 닌 지 판단 instanceof
: 대상 이 특정한 구조 함수 인지 아 닌 지 를 판단 하 는 실례 __proto__
브 라 우 저 업 체 의 개인 적 인 실현 일 뿐 규범 은 지원 되 지 않 습 니 다. 규범 지원 Object.getPrototypeOf Object.setPrototypeOf
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Scratch 3.0을 Hack하자. Babel을 만져 보자.이번에는 Babel을 만져 보겠습니다. Babel은 가장 현대적인 JavaScript를 현재 브라우저용 레거시 JavaScript로 변환하는 도구입니다. Scratch3.0에서 사용됩니다. 왜 여기서 Babel을 다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.