此文关于js原型和原型链的
参考资料:
https://juejin.im/post/5e6e000fe51d4526f071efea
原型链意义
// 首先先看完上面的参考资料,我们了解到
Object.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true
// 类似于
// 构造函数
var a = function () {};
// new 一个构造函数
var A = new a();
/* a.prototype 是原型,A.__proto__ 是原型链,指向a.prototype原型,继续深究,a.prototype.__proto__指向
Object.prototype,再继续深究,Object.prototype.__proto__指向null,ok,底层了。差不多可以理解为构造
函数的原型链指向方法的原型,方法(此处的方法是基础类型之一的方法)的原型的原型链指向对象(此处
的对象是基础类型之一的对象)原型上的原型链,对象原型的原型链最终指向null。*/
以上是es5的原型以及原型链理解,其用处一般用于继承(通过构造函数+原型对象实现继承),到了es6,出现了class类,继承就简单了,直接通过class+extends即可。
类的本质其实是函数,是构造函数的另外一种写法:
class Person {
// constructor 译为构造器,class中比如会有这个函数,所有属性都可定义在其中,方法定义同级
constructor(name, sex) {
this.name = name;
this.type = 'human'
}
printName() {
console.log(this.name)
}
}
class Student extends Person {
// extends 译为继承,此处继承了Person的方法和属性
constructor(name, score, sex) {
super(name); // 此处super代表Student继承Person的name属性
this.score = score; // score是Student私有,Person不会拥有
this.sex = sex;
}
printScore() {
console.log(this.score)
}
}
let stu = new Student('xiaohong', 100, 'nv');
let per = new Person('xiaozi', 'nan');
console.log(stu.printName === per.printName); // true, Student会继承父级的方法和属性,Student内的方法却是Student私有的
console.log(stu.sex === per.sex); // false,因为Student没有通过super继承父级的sex,所以两者的内存地址指向不一样
per.printScore(); // 报错,per.printScore不是一个函数
per.printScore; // undefined,未定义
console.log(stu.printScore === per.printScore); // false
stu.type; // human
// 这是原型链实现的继承
// 子类的原型指向父类的实例,这样就可以顺着原型链共享父类的方法了。并且为子类添加原型方法的时候,不会影响父类。
function Father(name) {
this.name = name;
}
Father.prototype.dance = function () {
console.log('I am dancing');
};
function Son(name, age) {
Father.call(this, name);
this.age = age;
}
Son.prototype = new Father();
Son.prototype.sing = function () {
console.log('I am singing');
};
let son = new Son('小红', 100);
console.log(Father.prototype) //{dance: ƒ, constructor: ƒ}
综上,我们可以得到结论:
原型以及原型链主要用于函数的继承,为避免子级的方法污染到父级,需要通过new父级构造单独建立一个内存,后面出了class,原型链用的少了,而class+extends实现继承也确实简单明了。通过super继承的属性指向地址都一致,父级的方法都会被子级继承,子级的私有化属性和方法不会污染到父级。
扩展下class的规则
class A {
constructor(){
this.x = 1
}
send() {
return console.log(this.x)
}
}
class B extends A {
constructor() {
super();
this.x = 2;
}
send2() {
this.send()
}
}
let b = new B();
b.send2(); // 2,因为this.send()走的父级的send方法,但是this.x以子级内容优先。
b.x = 3;
b.send2(); // 3
// class类添加方法:
Object.assign(A.prototype, {
say() {console.log('hello')},
y: 4
})
b.y; // 4
b.say(); // hello