说明
重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记。如有侵权,请联系我,谢谢。
js的原型
- 如果所有对象都有私有字段[[prototype]],就是对象的原型
- 读一个属性,在该对象上找不到,就会去它的原型上查找,直到原型为空或者找到为止
js提供内置函数,来访问和操纵原型
- Object.create:根据指定的原型来创建新对象,原型可以是null
- Object.getPropertyOf:获取对象的原型
- Object.setPropertyOf:设置对象的原型
var cat = {
say(){
console.log("meow~");
},
jump(){
console.log("jump");
}
}
var tiger = Object.create(cat, {
say:{
writable:true,
configurable:true,
enumerable:true,
value:function(){
console.log("roar!");
}
}
})
var anotherCat = Object.create(cat);
anotherCat.say();
var anotherTiger = Object.create(tiger);
anotherTiger.say();
复制代码
早期版本中的类与原型
(待补充)
new操作
new运算一个构造器和一组参数,实际做了这三件事
- 以构造器的prototype属性为原型,创建新对象
- 讲this和参数传给构造器,执行
- 如果构造器返回的是对象,则返回,如无,就返回第一步创建的对象
new操作让函数对象在语法上跟类相似,但是,它提供了两种方式,一种是在构造器添加属性,一种是通过构造器的prototype属性添加属性
// 通过构造器
function c1(){
this.p1 = 1;
this.p2 = function(){
console.log(this.p1);
}
}
var o1 = new c1;
o1.p2();
// 通过构造器的原型
function c2(){
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function(){
console.log(this.p1);
}
var o2 = new c2;
o2.p2();
复制代码
用new来实现一个Object。create的不完整polyfill
Object.create = function(prototype){
var cls = function(){}
cls.prototype = prototype;
return new cls;
}
复制代码
这段代码创建了一个空函数作为类,并把传入的原型挂在了它的prototype,最后创建了一个它的实例,根据 new 的的行为,这将产生一个以传入的第一个参数为原型的对象。
ES6中的类
类的基本写法
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
复制代码
通过get/set来创建getter,通过括号和大括号来创建方法,数据型成员写在构造器里。
类提供了继承能力
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
constructor(name) {
super(name); // call the super class constructor and pass in the name parameter
}
speak() {
console.log(this.name + ' barks.');
}
}
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
复制代码
比起早期的原型模拟方式,使用 extends 关键字自动设置了 constructor,并且会自动调用父类的构造函数,这是一种更少坑的设计。
转载于:https://juejin.im/post/5d0ba47de51d454fbf540a15