js 对象 原型 继承

1，js对象分两种

1. var obj = {}
2. function fun1 () {}  , 实际上函数 也是对象

p001.png

首先申明一点
prototype是函数特有的，对象并没有
从图上也能看出
打印obj时，它的原型是 Object
打印fun1时，显示的是它的函数
打印fun1.prototype时， 显示 prototype 的原型是Object , 构造函数是 fun1,与new 出来的 vfun1 的原型是一致的

关于原型链的讲解，请阅读这篇（帮你彻底搞懂JS中的prototype、proto与constructor）文章，我觉得讲的特别好。

2，为什么会有原型属性

看下这个例子

function fun (name) {
  this.name = name;
}
fun.prototype.age = 2;

var xiaohong = new fun('小红')
var xiaoming = new fun('小明')

p002.png

我相信图上的结果和大家预想的一样
如果这时 我改了 原型上的 age 会怎么样

fun.prototype.age = 3;

p003.png

从图中看到 xiaohong，xiaoming的age都变了，那么我们是不是可以认为，通过 new fun得到的对象的proto就是 fun.prototype的引用呢？
我们实验一下 看看修改 xiaoming的proto.age 会发生什么

xiaoming.__proto__.age = 4;

p004.png

可以看到 xiaohong的age 也变了。我们的猜测是对的。

结论：原型属性是被 由它创建出来的所有对象共享的

3，再谈继承

通过前面的学习 我们知道。
继承需要，继承两方面
1，对象的属性
2，对象的原型的属性

3.1 对于非函数对象来说，只要把它的属性全部都复制过来就好

所以 Object.assign 就派上用场了
来看个例子

var obj1 = {
  name: '小红', 
  age: 2, 
  class: {
    name: '大班',
    level: 1
  }
}

var obj2 = {sex: '男'}

var obj3 = Object.assign(obj2, obj1)

p005.png

但，请注意assign是浅拷贝

p006.png

3.2 函数对象的继承

function fun1 (name) {
  this.name = name;
}
fun1.prototype.age = 2;
fun1.prototype.class = {
  name: '大班',
  level: 1,
}

function fun2 (sex) {
  this.sex = sex;
}

先确认两点
1，fun1 的name 属性是无法直接访问到的，必须得new 出一个对象来之后才可以,
还有就是在fun1 内部用this 访问
2，prototype的属性是可以直接访问的（所有对象共享，不需要new）

3.2.1 所以，继承 函数本身的属性可以这样

1，改变this指向

function fun2(sex, name) {
  this.sex = sex;
  fun1.call(this, name)
}

p007.png

这样只继承了 函数属性，并没有继承函数原型属性

2，new 个 fun1 给fun2

function fun3 (sex, name) { 
  this.sex=sex; 
  let f1 = new fun1(name);  
  Object.assign(this, f1);
}

p008.png

还可以这样, 但这样 问题很多， 主要是 父函数对象的构造函数不能用了

function fun3 (sex, name) { 
  this.sex=sex; 
}
fun3.prototype = new fun1()

3.2.2 prototype属性的继承, 其实这时的继承与 对象属性的继承是一样的

只是要放到prototype上

function fun4(sex, name) {
  this.sex = sex;
  fun1.call(this, name)
}

Object.assign(fun4.prototype, fun1.prototype);
或者
fun4.prototype = Object.create(fun1.prototype)

let f4 = new fun4('男', '小樱')

先看用assign

p009.png

fun4 完美的继承了 fun1

修改父对象原型属性 看一下

p010.png

这也符合我么的预期 assign是 浅拷贝

再看下用 ceate

p011.png

可以看出 create是创建了一个新对象
修改父对象原型属性 看一下

p012.png

这个结果要比 用 assign好， prototype上的属性全部共享 才是对的。
但 我们 看到 还有一个问题，fun4的 构造函数是 fun1的。
所以我们要改一下

fun4.prototype.constructor = fun4

p013.png

这样就更完美了

参照
帮你彻底搞懂JS中的prototype、proto与constructor
深入剖析Object.create()，为与之相关的理解形成闭环
Object.create 与 继承