作者:Elaine桑定_148 | 来源:互联网 | 2023-09-25 11:07
笔记申明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时候开的一个专栏,天天10分钟,重构你的前端学问体系,笔者重要整顿进修历程的一些要点笔记以及感悟,完全的能够到
笔记申明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时候开的一个专栏,
天天10分钟,重构你的前端学问体系,笔者重要整顿进修历程的一些要点笔记以及感悟,完全的能够到场winter的专栏进修【原文有winter的语音】,若有侵权请联络我,邮箱:kaimo313@foxmail.com。
一、什么是原型?
1.0、定义
原型是指一个词语或一个范例意义的一切典范模子或原笼统,是一个范例的组典范特性
1.1、基于类的编程言语
诸如 C++、Java 等盛行的编程言语是运用类的体式格局来形貌对象,
基于类
的编程首倡运用一个关注分类和类之间关联开辟模子。
1.2、基于原型的编程言语
如 Javascript 编程言语是应用原型来形貌对象,
基于原型
的编程看起来更加首倡程序员去关注一系列对象实例的行动,然后才去体贴如何将这些对象,划分到近来的运用体式格局类似的原型对象,而不是将它们分红类。
1.3、原型体系的“复制支配”有两种完成思绪
- 一个是并不真的去复制一个原型对象,而是使得新对象持有一个原型的援用
- 另一个是切实地复制对象,今后两个对象再无关联。
Javascript挑选了第一种体式格局。
二、Javascript 的原型
2.0、原型体系的两条归纳综合
- 假如一切对象都有私有字段
[[prototype]]
,就是对象的原型 - 读一个属性,假如对象自身没有,则会继续接见对象的原型,直到原型为空或许找到为止。
2.1、三个内置函数
能够应用下面三个要领,更直接地接见支配原型,来完成笼统和复用。
-
Object.create
依据指定的原型建立新对象,原型能够是 null
-
Object.getPrototypeOf
取得一个对象的原型 -
Object.setPrototypeOf
设置一个对象的原型
winter举了用原型来笼统猫和虎的例子:
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(); // meow~
var anotherTiger = Object.create(tiger);
anotherTiger.say(); // roar!
三、初期版本中的类与原型
3.0、“类”的定义是一个私有属性 [[class]]
一切具有内置 class 属性的对象:(ES3和之前版本)
var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log(
[o, n, s, b, d, arg, r, f, arr, e].map(v => Object.prototype.toString.call(v)
)
)
言语运用者唯一能够接见 [[class]] 属性的体式格局是 Object.prototype.toString
。
3.1、[[class]]
私有属性被 Symbol.toStringTag
替代
能够检察MDN文档Symbol.toStringTag以及Object.prototype.toString的引见:(ES5最先)
var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + ""); // [object MyObject]
上面这段代码建立了一个新对象,而且给它唯一的一个属性 Symbol.toStringTag
,用字符串加法触发了Object.prototype.toString
的挪用,发明这个属性终究对 Object.prototype.toString
的效果产生了影响。
3.2、new运算做了什么?
- 1、以组织器的
prototype
属性(注重与私有字段 [[prototype]]
的辨别)为原型,建立新对象 - 2、将
this
和挪用参数传给组织器,实行 - 3、假如组织器返回的是对象,则返回,不然返回第一步建立的对象。
用组织器模仿类的两种要领:
// 1、在组织器中修正 this,给 this 增加属性
function c1() {
this.p1 = 1;
this.p2 = function(){
console.log(this.p1);
}
}
var o1 = new c1;
o1.p2(); // 1
// 2、修正组织器的 prototype 属性指向的对象,它是从这个组织器组织出来的一切对象的原型。
function c2() {
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function() {
console.log(this.p1);
}
var o2 = new c2;
o2.p2(); // 1
四、ES6 中的类
4.0、类的基础写法
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
4.1、类的继续才能
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.
上面代码挪用子类的 speak 要领获取了父类的 name。假如关于class
还想相识更多,能够检察MDN文档Classes部份。
个人总结
实在关于这一部份非常不明白,也不清楚,关于这些js基础性的东西照样要多下下功夫才行,毕竟winter的重学前端至心不错,对我来讲举行查漏补缺,看清本身的程度很有协助,路还很长,还要加油呀!!!