js对象(原型对象/原型链)

对象：属性无序，每个属性都有一个字符串key和对应的value（数组/函数/date...） image.png

一个对象的结构(属性+操作)
属性：
（1）我们要说属性的来源，它有两个来源，第一来自于自己如上图的x,y属性，第二来自于原型链的继承，如上图的z，当我们访问obj.z时，会首先在自身上找这个属性，有的话将返回没有的话将沿着原型链继续向上查找找到返回，没有找到的话返回undefined，如果我们给对象obj添加属性z obj.z = 4,那么做的操作将是在对象的身上添加一个新属性z，此时我们访问obj.z将会是4，但是我们访问原型对象上的z依然会是3，这是因为根据原型链查找的优先原则，先要访问自身，找到有z的值那就将它读取
（2）我们要说的将是属性标签，属性标签就是定义描述这个属性可以做哪些不可以做哪些，属性标签有4个(writable/enumerable/configurable/value)分别是是否可写/是否可枚举/是否可重新配置/值，get/set则是设置和读取属性值指定的方法，这里不做过多的赘述
操作：即方法，方法的来源与属性相同，一是来自于自身，而是来自于原型链的继承

原型对象与原型链：其实js对象最难理解的部分就是这里，其实要弄懂这个，我们要想为什么会有这两个东西，我们知道在js里是没有类这个概念的，如果想创建对象，除了对象字面量另一种方式将是函数，这里就要讲到函数的一个用法，用作构造函数，既然有了构造函数可以创建对象，那么拿什么来继承呢，当然就是原型对象啦，再说白一点就是每个函数都有一个属性指向原型对象，而我们new出来的实例也有一个属性也指向原型对象，这两个原型对象是一个的哦，而原型对象由于继承形成的一条链就叫做原型链(所有的对象都继承于object)，如下图 image.png 如果上图看懂了的话，我们就不难理解为什么数组可以调用hasOwnProperty方法,我们可以看到数组的原型对象并没有这个方法，然而沿着原型链我们可以查找到它继承了 image.png
image.png
附：

一：创建对象的多种方式

1.对象字面量和Object(产生大量重复代码) image.png
2.工厂模式(无法知道一个对象的类型)! image.png
3.使用构造函数(不同实例内的同名函数是不相等的，浪费内存空间) image.png
4.使用原型 image.png
5.组合使用构造函数和原型模式 image.png

二：实现继承的多种方式

//父类
function Person(name){
  this.name = name;
  this.show = function(){ 
       console.log(this.name) 
   }
}
//原型方法
Person.prototype.showName = function(){ console.log(this.name) }
//1.原型继承(将父类的实例作为子类的原型 缺点:挂在到Stu原型的方法必须要在Stu.prototype = new Person()之后执行,并且let stuObj = new Stu()也要在原型更换之后执行，否则stuObj._proto_是不等于Stu.prototype的)
function Stu(){}
Stu.prototype = new Person("haha");
let stuObj = new Stu();
stuObj.show(); //haha
stuObj.showName(); //haha
stuObj.name = "xixi";
stuObj.show();  //xixi
stuObj.showName(); //xixi
console.log(stuObj instanceof Stu); //true
console.log(stuObj instanceof Person); //true

//2.构造继承(1.实例并不是父类的实例，2.只能继承父类的属性和方法，并不你能访问到父类原型的属性和方法， 3.父类函数会在每个子类中都存在一个副本)
function Stu(name){
  Person.call(this,name)
}
let stuObj = new Stu("haha");
stuObj.show();
stuObj.name = "xixi";
stuObj.show();
stuObj.showName();//报错
console.log(stuObj instanceof Stu); //true
console.log(stuObj instanceof Person); //false
//3.实例继承(为父类实例添加新属性，作为子类实例返回 缺点：实例时父类的实例，不是子类的实例)
function Stu(name){
  let per = new Person(name);
  per.showName = function(){         
     console.log(per.name)}
  return per;
}
let stuObj = new Stu("haha");
stuObj.showName();//haha
stuObj.show(); //haha
console.log(stuObj instanceof Person) ;//true
console.loe(stuObj instanceof Stu);//false

//4.拷贝继承(无法获取到父类不可枚举的方法)
function Stu(name){
  this.name = name;
  let per =  new Person();
  for(let i in per){
    Stu.prototype[i] = per[i]
  }
}
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stuObj instanceof Person);//false
//5.组合继承(通过调用父类构造，继承父类的属性和方法，通过将父类的实例作为子类原型实现父类原型方法的继承，需要修复构造函数指向)
function Stu(name){
  Person.call(this,name);
}
Stu.prototype = new Person();
Stu.prototype.constructor = Stu;
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stu instanceof Person);//true
//6.寄生组合继承(通过寄生方式。砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法属性，避免组合继承的缺点)
function Stu(name){
  Person.call(this);
}
(function(){
  //创建一个没有实例方法的类
  let Super = function();
  Super.prototype = Person.prototype;
  Stu.prototype = new Super();
})()
Stu.prototype.constructor = Stu; //修复构造函数
let stuObj = new Stu("haha");
stuObj.show();
stuObj.showName();
console.log(stuObj instanceof Stu);//true
console.log(stuObj instanceof Person);//true

三：js实现多态和重载
多态：多态是动态的，发生在运行阶段，面向对象特征之一。表现为不同对象调用相同方法会产生不同的结果，可以理解一个方法被不同实现后，展现不同的效果
重载：重载发生在编译阶段。函数特征之一，表现为在一个类中同名不同参的方法分别被调用产生不同的结果

重载实现(js本身不支持重载)
1.根据arguments个数实现重载

image.png

2.根据参数类型实现重载

image.png

多态实现

image.png
image.png

javascript学习(ECMAScript，DOM，BOM)https://www.jianshu.com/p/b7136540b379