Comments (2)
_createClass
创建基础类
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
以下两件事:
- 把所有类方法拷贝到 constructor's prototype 里
- 把所有的 static methods 拷贝到 constuctor 里
注意拷贝的方式为 Object.defineProperty
,并且默认是不能枚举 ( enumerable ) 和可修改的 ( configurable ) 。
继承类
我们的代码如下
class Rectangle extends Polygon {
constructor(height, width) {
super(height, width);
this.name = 'Rectangle';
}
sayName() {
ChromeSamples.log('Sup! My name is ', this.name + '.');
super.sayHistory();
}
}
被转化成了下面代码
var Rectangle = (function(_Polygon) {
_inherits(Rectangle, _Polygon);
function Rectangle(height, width) {
_classCallCheck(this, Rectangle);
var _this = _possibleConstructorReturn(
this,
(Rectangle.__proto__ || Object.getPrototypeOf(Rectangle)).call(
this,
height,
width
)
);
_this.name = "Rectangle";
return _this;
}
_createClass(Rectangle, [
{
key: "sayName",
value: function sayName() {
ChromeSamples.log("Sup! My name is ", this.name + ".");
_get(
Rectangle.prototype.__proto__ ||
Object.getPrototypeOf(Rectangle.prototype),
"sayHistory",
this
).call(this);
}
}
]);
return Rectangle;
})(Polygon);
我们发现 super 好像被翻译成了 (Rectangle.proto || Object.getPrototypeOf(Rectangle))
_inherits
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError(
"Super expression must either be null or a function, not " +
typeof superClass
);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass)
Object.setPrototypeOf
? Object.setPrototypeOf(subClass, superClass)
: (subClass.__proto__ = superClass);
}
注意两点:
- 设置 subclass 的 prototype 为 Object.create(null) 或者 Object.create(superClass.prototype, { constructor });
- 设置 subclass 的 [[prototype]] 为 superclass, (为了继承 static methods 和调用 super)。
借用一副图来描述子类和父类之间的关系
from hello-world-blog.
_possibleConstructorReturn
// var _this = _possibleConstructorReturn(
// this,
// (Rectangle.__proto__ || Object.getPrototypeOf(Rectangle)).call(
// this,
// height,
// width
// )
// );
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
);
}
return call && (typeof call === "object" || typeof call === "function")
? call
: self;
}
构造函数有返回值的时候返回,否则返回 this。
_get
// super.sayHistory();
// _get(
// Rectangle.prototype.__proto__ ||
// Object.getPrototypeOf(Rectangle.prototype),
// "sayHistory",
// this
// ).call(this);
var _get = function get(object, property, receiver) {
if (object === null) object = Function.prototype; // ??? 1
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
return get(parent, property, receiver);
}
} else if ("value" in desc) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver); // ??? 2
}
};
from hello-world-blog.
Related Issues (20)
- 客户端缓存
- Node.js的resolve机制 HOT 1
- 《 Micro State Management With React Hooks 》笔记 HOT 6
- 《 编程与类型系统 》笔记 HOT 3
- TypeScript类型编程 HOT 2
- 《调试九法:软硬件错误的排查之道》笔记 HOT 2
- FLV.js错误处理
- 浏览器自动播放
- 声明式UI HOT 1
- 键盘侠训练 HOT 14
- React性能优化 HOT 1
- vite技巧 HOT 3
- nginx配置 HOT 6
- 缓存更新 HOT 1
- redis用例 HOT 2
- 新网站的架构 HOT 5
- 从rails中学点设计 HOT 2
- ruby很有趣
- 实践下🍅工作法
- 还是得每天学点
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hello-world-blog.