原型与原型链JS

原型与原型链

一：原型

1.定义：原型是Funtion对象中的一个属性，它定义了构造函数制造出的对象的共同祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。

//Person.prototype ----原型 ? 一个对象 ? 当一个函数被定义时它就存在，自身带的属性
//Person.prototype = {} 是祖先
Person.prototype.Firstname = "li"
Person.prototypr.Lastname = "Am"
//或者
//Person.prototype = {
//  Firstname: "li",
//  Lastname:"Am"
//}
function Person (Lastname) {
 ? ?this.Lastname = Lastname;
}
var person = new Person(Bm);
var person1 = new Person(Cm);
console.log(person.Fiestname,person.Lastname);
//输出“li Bm”，虽然 new Person()之中没有name属性，但是它会从它的Person.prototype(原型)中继承,如果 new Person()中有该属性那么就会用自己的属性而不会用原型的属性。
console.log(person.Firstname,person.Lastname);//也是输出“li Cm”，以为它和person1用的是同一个原型；

2.应用：可以利用原型提取公共属性

• 比如上面中的Firstname就相当与公共属性，在原型中增加该属性可以减少耦合；

3.增删改查(通过子代)

1. 增删改

   • 基本上只能通过函数的原型来修改(Person.protoype.Firstname = "wang").

   • 通过new的对象来修改基本上不可能

2. 查

   • 只有被继承时才会显示

4.prototye.constructor(构造器)

Person.prototype = {
 ? ?//看似为空，其实其中有两个隐式属性，为系统自设；
 ? ?/*constructor:Person(), ?  是构造出这个原型的函数---可以手动更改
 ?  _proto_:object ? ? ? ? ? 详下一个*/
}
function Noething (){
 ? ?
}
Person.prototype.constructor = Noething//此时Person.prototype.constructor 为noething。
5.prototype.proto
function Car () {
 ? ?/*new 的全过程 --- 隐式过程
 ?      var this = {
 ?          __proto__:Car.prototype ? ? ----  相当于起到联接原型的作用
     ?  };
     ?  .....(执行函数内容)
     ?  return this*/
}
var car = new Car();

二：原型链

• 通过—proto—来联接原型，使其形成链

Grand.prototype.Lastname = "li";
function Grand () {
 ? ?
}
var grand = new Grand();
?
Father.prototype = grand;
function Father() {
 ? ?this.name = "Am";
 ? ?this.money = "20W"；
 ? ?this.key = {
 ? ? ? ?key1:"200"
 ?  };
}
var father = new Father();
?
Son.prototype = father;
function Son () {
 ? ?this.name = "Bm";
 ? ?this.age = 18;
}
var son = new Son();
//假如出现没有的属性会一层一层的往上寻找  son->Son.prototype.__proto__(father)->Father.prototype.__proto__(grand)->Grand.prototype.__proto__(Object)->Object.prototype.__proto__(null)  ————终端
console.log(son.name)//输出“Bm”
console.log(son.money)//输出"20W"
console.log(son.Lastname)//输出“li”
?
//增删改查 ? ---其实与原型差不多
son.Lastname = "wu"//这里是son本身加了一个属性，而非将Grand的Lastname修改为"wu"----增删改一样也（换句话就是通过子代修改父代基本上不能实现）
?
//特例-----针对于引用值（方法的修改，而不是覆盖/赋值的修改）
son.key.key2 = "300"//这里就可以将Father.key添加一个key2 = "300"的属性，而son并没有该属性，因为对于调用应用值它操作的是它直接（简而言之就是son.key.key2这里只是在操做key这个对象，son.key是调用了key）

?

Man.prototype = {
 ? ?name: "Am",
 ? ?height: 100,
 ? ?say: function (){
 ? ? ? ?console.log(this.name);
 ?  }
}
function Man (){
 ? ?this.name = "Bm";
 ? ?this.eat = function(){
 ? ? ? ?this.height ++;
 ?  }
}
var man = new Man()
man.say();//输出“Bm”，方法中的this指向---谁调用的就指向谁
man.eat();//man中会添加一个height属性并且值为101，首先调用eat()后会执行this.height ++，因为man自身没有height所以就会继承原型的height并且++后添加到man中

三：Objec.create()所创建的对象

// var obj = Object.create(原型) --------create()括号中只能填“对象”或者"null"
var obj = {
    name: "li",
 ? ?age: 19
}
var obj1 = Object.create(obj);//此时obj1的原型为obj
?
?
//因为create（）可以填null，所以导致其创建出的对象可能没有原型
var obj2 = Object.create(null);
//此时obj2没有原型；

• 由上所得：只是绝大多数对象最终会继承自Object.prototype

四：call/play

• 作用：改变this指向

function Person (name, age) {
 ? ?this.name = name;
 ? ?this.age = age;
}
var person = new Person()
var obj = {
 ? ?
}
Person.call(obj,"wu",20);//改变this指向，相当于在Person函数中顶部新增（this = obj),而后面两个是传入的参数
//实际上： Person() === person.call()
//此时；obj = {
//      name: "wu",
//      age: 20
//}
function Person (age,name){
 ? ?this.name = name;
 ? ?this.age = age;
}
/*假如也有一个构造函数需要实现的功能包括了上面的构造函数，如：
function Student (age,name,socor) {
    this.name = name;
    this.age = age;
    this.socor = socor;
}*/
//那么就可以用call的方法简化代码
function Student (age,name,socor) {
 ? ?Person.call(this,age,name);
 ? ?this.socor = socor;
}
var student = new Student;

?

• apply其实与call差不多，只有一点区别

  • 传参方式的不同

    1. call:需要把实参按照形参的个数传进去

    2. apply：传入的是一个arguments(实参列表)----数组

  function Student (age,name,socor) {
   ? ?Person.apply(this,[age,name]);
   ? ?this.socor = socor;
  }