一步一步学前端(二)

原型对象、普通对象、函数

• 原型对象
  原型对象指prototype，原型链上的每一个环节。原型对象有一个构造属性指向构造器(例如：Foo.prototype.constructor 指向Foo())，还有一个__proto__属性指向上一级父原型。顶层原型为obejct.prototype,object.__proto__为null

• 普通对象
  通过(构造)函数创建、字面量({},[])构建。默认会有__proto__属性，该属性指向该对象的构造函数的原型对象。

• 函数
  函数也算是一种特殊的对象,他的默认会比普通对象多一个prototype属性(除了通过fuction.prototype.bind()创建的函数)，指向原型对象。函数的__proto__指向fuction.prototype原型对象

object.prototype 与 function.prototype 都是由引擎创建的。function.prototype.__proto__指向object.prototype

原型链

js中没有类似后端语言的类继承，只能通过原型链进行模拟。每一个原型对象通过__proto__与父级连接形成类似继承链。共有的属性与方法可以放置在原型对象上。

原型的应用

构建对象

• 通过object函数 与 字面量{} 创建 。缺点是创建多个新对象会冗余代码

// 通过object 创建对象
let person = new Object();
person['name'] = "二狗";
person['sex'] = "男";
person['age'] = 25;
console.log(person); => { name: '二狗', sex: '男', age: 25 }

//通过字面量创建对象
let person2 = {
  name:"二狗",
  sex:"男",
  age:25
}
console.log(person2); => { name: '二狗', sex: '男', age: 25 }

• 工厂模式，可以多次创建对象，但是知道普通对象是由哪个函数创建

//通过工厂模式创建对象
function createObject(name,sex,age) {
  let obj = new Object();
  obj['name'] = name;
  obj['sex'] = sex;
  obj['age'] = age;
  return obj;
}
console.log(createObject('1','2','3'));

let obj = createObject('1','2','3');
console.log(obj instanceof Object); => true
console.log(obj instanceof createObject); => false

• 构造函数,缺点创建一个不同的对象就要写一个全局函数

function Person() {
  this.name= "二狗",
  this.sex = "男",
  this.age = 25;
  console.log(this);
  this.say = function () {
    console.log(this);
    console.log(this.name);
    
  }
}
let p1 = new Person();
console.log(p1 instanceof Person); => true
console.log(p1 instanceof Object); => true

• 通过原型模式创建，对于属性是基本属性和方法的适用，但是对于引用类型会出现公用内存修改

function p4() {}
p4.prototype.name= "二狗";
p4.prototype.sex = "男";
p4.prototype.age = 25;
p4.prototype.say =  ()=>{
  console.log(this);
  console.log('say');
}
p4.prototype.sayHI = function() {
  console.log(this);
  console.log('say hi');
}

let p4Obj = new p4();
let p5Obj = new p4();

p4Obj.say();//指向window对象
p4Obj.sayHI();//指向p4Obj

console.log(p4Obj.name);
console.log(p5Obj.name);
p4Obj.name = '123';
console.log(p4Obj.name);
console.log(p5Obj.name);

• 结合构造模式和原型模式

function Person5(name,age) {
  this.name = name;
  this.age = age;
  this.arr = [];
}
Person5.prototype = {
  constructor:Person5,
  sayHI:function (params) {
    console.log(this);
  }
}
let p5Obj = new Person5();
p5Obj.sayHI(); => 指向当前对象

构建继承关系

了解了创建原型的方法与原型链可以模拟类的继承关系

• 原型继承。存在所有实例会共享原型的属性的缺点

function  Father() {
  this.name = "father";
}
function Sun(params) {
  
}
Sun.prototype = new Father();
let sun = new Sun();
console.log(sun.name); => father

• 构造器模式

function Father(param) {
  this.name = param;
  console.log(this.name);
  
}
function Sun(param) {
  Father.call(this,param)//会将父原型的属性和方法拷贝到子对象中
  this.name = "sun";
}
let sun = new Sun('sun');

console.log(sun instanceof Sun); => true
console.log(sun instanceof Father); => false

• 拷贝继承

function Father(param) {
  this.name = param;
  this.say = function () {
    console.log(1);
    
  }
  
}
//组合继承
function Sun(params) {
  let f = new Father();
  for (const key in f) {
    Sun.prototype[key] = f[key]
  }
}

• 组合继承 ,父和子对象会出现冗余的相同属性

function Father(param) {
  this.name = param;
  this.say = function () {
    console.log(1);
    
  }
  
}
//组合继承
function Sun(params) {
  Father.call(this);

}
Sun.prototype = new Father();
Sun.prototype.constructor = Sun;

let sun = new Sun();

• 寄生继承

function Father(param) {
  this.name = param;
  this.say = function () {
    console.log(1);
    
  }
  
}
//寄生继承
function Sun(params) {
  Father.call(this);

}
(function(){
  let supper = function () {
    
  };
  supper.prototype = Father.prototype;
  Sun.prototype = new supper();
  Sun.prototype.constructor = Sun;
})();

let sun = new Sun();

• es5继承

function Super() {};
Super.prototype.getName = () => {
  console.log('name');
}

function Subber() {};
let sub = new Subber();

Subber.prototype = Object.create(Super.prototype, {
  constructor: {
    value: Sub,
    enumerable: false,
    writable: true,
    configurable: true
  }
});