JavaScript面向对象的程序设计——“对象继续”的注重要点

2019年8月30日 109次阅读来源: JS菌

继续

继续分为接口继续和完成继续；接口继续只继续要领署名，完成继续则继续现实的要领；由于函数没有署名，所以ECMAScript 中没有接口继续，只能依托原型链来完成完成继续。

原型链

基础思想是应用原型链让一个援用范例继续另一个援用范例的属性和要领：

如：Person2.prototype 是Person1.prototype 的继续，那末（“—>” 意为“指向”）：

Person2.prototype - [[Prototype]] ---> Person1.prototype
Person2 - prototype ---> Person2
person2 - [[Prototype]] ---> Person2.prototype
//Person2.prototype 无 constructor

Person1.prototype - cunstructor ---> Person1
Person1 - prototype ---> Person1.prototype
person1 - [[Prototype]] ---> Person1.prototype

详细要领

详细怎样继续呢：

function People(){}; //原始的
People.prototype.sayWorld = function(){
    return "World people"
};

function Person(){}; //继续的
Person.prototype = new People(); //这里应当注主要先继续
Person.prototype.sayNation = function(){ //然后再修正prototype
    return "Chinese people"
};

var person = new Person(); //实例
console.log(person.sayNation()); //Chinese people
console.log(person.sayWorld()); //World people

肯定要注重！！！给原型增加要领的代码肯定要放在替代原型的语句以后！！！

再举个例子：

function WorldPeople(){};
WorldPeople.prototype = {
    constructor: WorldPeople,
    color: "",
    say: function(){
        return "People in the Earth."
    },
    friends: ["Oliver","Alice","Troy"]
};

function Chinese(){};
Chinese.prototype = new WorldPeople();
Chinese.prototype.color = "yellow";
Chinese.prototype.say = function(){
    return "i am Chinese."
};

var person1 = new Chinese();

console.log(person1.friends.toString());
console.log(person1.color);
console.log(person1.say());    
/*
[Log] Oliver,Alice,Troy (repetition.html, line 163)
[Log] yellow (repetition.html, line 164)
[Log] i am Chinese. (repetition.html, line 165)
*/

肯定原型和实例的关联

用instanceof 操作符和insPrototypeOf() 要领即可，如：

console.log(person1 instanceof Object); //true;
console.log(person1 instanceof WorldPeople); //true;
console.log(person1 instanceof Chinese); //true;

console.log(Object.prototype.isPrototypeOf(person1)); //true
console.log(WorldPeople.prototype.isPrototypeOf(person1)); //true
console.log(Chinese.prototype.isPrototypeOf(person1)); //true

郑重定义要领

肯定要记得，给原型增加要领的代码肯定要放在替代原型的语句以后！

还要记得，经由历程原型链完成继续时，不能运用字面两建立原型要领，由于如许会重写原型链！

原型链的题目

包括援用范例值的原型，该属性会被一切实例同享；
在建立子范例的实例时，不能向超范例的组织函数中通报参数；

关于第一种题目：

function People(){}
People.prototype.friends = ["Alice","Oliver"];

function Person(){};
Person.prototype = new People();

var person1 = new Person();
var person2 = new People();

person1.friends.push("Troy");

console.log(person1.friends);
console.log(person2.friends); //二者完整相同

有什么解决办法呢：

借用组织函数（不引荐运用）

被称为“借用组织函数”的手艺或捏造对象或典范继续。如：

function People(){
    this.friends = ["Alice","Oliver"];
}

function Person(){
    People.call(this); //继续了People
}

//这里就没必要写Person.prototype = new People()

var person1 = new Person();
var person2 = new Person();

person1.friends.push("Troy");

console.log(person1.friends); //["Alice", "Oliver", "Troy"]
console.log(person2.friends); //["Alice", "Oliver"]

该要领的主要上风就是能够在子范例组织函数中向超范例组织函数通报参数。

又如：

function SuperType(name){
    this.name = name;
}

function SubType(){
    SuperType.call(this,"Oliver"); //这里不单单议继续了SuperType，而且还向它通报了参数
    this.age = 18;
}

var person = new SubType();
console.log(person.name); //Oliver
console.log(person.age); //18

由于函数不可复用等题目，不引荐运用。

组合继续（最经常使用的形式）

也叫做伪典范继续。如：

//不通用的属性
function SuperType(name){
    this.name = name;
    this.colors = ["Blue","Red","Black"];
}
//通用的要领
SuperType.prototype.sayName = function(){
    return (this.name);
};

//继续属性并新增属性
function SubType(name,age){
    SuperType.call(this,name);//继续属性
    this.age = age;//新增属性
}
//继续要领并新增要领
SubType.prototype = new SuperType();//继续要领
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){//新增要领
    return (this.age);
};

var person1 = new SubType("Oliver",18);
var person2 = new SubType("Troy",24);
person1.colors.pop();
console.log(person1.colors);
console.log(person2.colors);
console.log(person1.sayName() + person1.sayAge());
console.log(person2.sayName() + person2.sayAge());

/*
[Log] ["Blue", "Red"] (repetition.html, line 255)
[Log] ["Blue", "Red", "Black"] (repetition.html, line 256)
[Log] Oliver18 (repetition.html, line 257)
[Log] Troy24 (repetition.html, line 258)
*/

最经常使用的要领。再举个例子：

function People(name,age){
    this.name = name;
    this.age = age;
    this.friends = [];
}
People.prototype.friendsList = function(){
    document.write(this.friends.toString());
};

function Person(name,age,color,job){
    People.call(this,name,age);
    this.color = color;
    this.job = job;
}
Person.prototype = new People();
Person.prototype.constructor = Person;
Person.prototype.sayInfo = function(){
    document.write(this.name + this.age + this.color + this.job);
};

var person1 = new Person("Oliver",18,"yellow","Hero");
person1.friends.push("Alice");
person1.sayInfo(); //Oliver18yellowHero
person1.friendsList(); //Alice

var person2 = new Person("Troy",24,"White","Fighter");
person2.friends.push("Oliver","Islan");
person2.sayInfo(); //Troy24WhiteFighter
person2.friendsList(); //Oliver,Islan

日常平凡用这个要领已充足。又如：


function Cars(name){
    this.name = name;
    this.hasColor = ["blue","black"];
}
Cars.prototype.sayName = function(){
    console.log(this.name);
};

function Car(name,color){
    Cars.call(this,name);
    this.color = color;
}
Car.prototype = new Cars();
Car.prototype.constructor = Car;
Car.prototype.sayColor = function(){
    console.log(this.color);
};
var benz = new Car("Benz-C200","Black");
benz.hasColor.push("red");
benz.sayName();
benz.sayColor();
console.log(benz.hasColor);
var benz2 = new Car("Benz-C180","White");
benz2.hasColor.push("white");
benz2.sayName();
benz2.sayColor();
console.log(benz2.hasColor);    
/*
[Log] Benz-C200 (repetition.html, line 309)
[Log] Black (repetition.html, line 319)
[Log] ["blue", "black", "red"] (repetition.html, line 325)
[Log] Benz-C180 (repetition.html, line 309)
[Log] White (repetition.html, line 319)
[Log] ["blue", "black", "white"] (repetition.html, line 330)
*/

连系建立对象和继续对象，来一个比较吧：

主要！

//组合运用组织函数形式和原型形式-建立对象
function Person(name,age){
    this.name = name;
    this.age = age;
    this.friendsList = ["Alice","Islan"];
}
Person.prototype.friends = function(){
    console.log(this.friendsList.toString());
};

var person1 = new Person("Oliver",18);
var person2 = new Person("Troy",24);
person1.friendsList.pop();
person1.friends(); //Alice
person2.friends(); //Alice,Islan

//组合继续-继续对象
function Person(name,age){
    this.name = name;
    this.age = age;
    this.friendsList = ["Alice","Islan"];
}
Person.prototype.friends = function(){
    console.log(this.friendsList.toString());
};
function Info(name,age,job){
    Person.call(this,name,age);
    this.job = job;
}
Info.prototype = new Person();
Info.prototype.constructor = Info;
Info.prototype.sayJob = function(){
    console.log(this.job);
};

var person1 = new Info("Oliver",18,"Master");
var person2 = new Info("Troy",24,"Hero");
person1.friendsList.pop();
person1.friends(); //Alice
person2.friends(); //Alice,Islan
person1.sayJob(); //Master
person2.sayJob(); //Hero

对照一下，就能够看出，继续属性主要应用到call 操作符给超范例组织函数通报参数；而继续要领则要注重不可运用字面量语法。

以上

原型式继续

一般只是想让一个对象与另一个对象坚持相似的情况下，原型式继续是完整能够胜任的。同享响应的援用范例的值的属性。

语法是：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

如：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Oliver",
    friends: ["Alice","Islan"]
};

var anotherPerson = object(person);
anotherPerson.name = "Troy";
anotherPerson.friends.push("Ellen");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Ellen";
yetAnotherPerson.friends.push("Troy","Oliver");

console.log(person.friends);

又如：

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Oliver",
    friends: ["Alice","Islan"]
};

var anotherPerson = object(person);
anotherPerson.name = "Troy";
anotherPerson.friends.push("Oliver");

console.log(person.friends);["Alice", "Islan", "Oliver"]

这类要领比较简单，只是想让person 和anotherPerson 坚持相似并同享援用范例的值的属性。

寄生式继续（不能做到函数复用而致使效力下降）

建立一个封装继续历程的函数罢了：

function createAnotherObj(obj){
    var clone = obj;
    clone.sayHi = function(){
        console.log("hi");
    };
    return clone;
}

var person = {
    name: "Troy",
    friends: ["Alice"]
};

var anotherObj = createAnotherObj(person);
anotherObj.sayHi();
anotherObj.name = "Oliver";
anotherObj.friends.push("Ellen");
console.log(person.friends);
console.log(anotherObj.friends); //两个完整一样

寄生组合式继续（最理想的继续范式）

基础逻辑就是起首建立一个超范例原型的一个副本；然后为副本增加constructor 属性；末了把副本赋值给子范例的原型。如：

function inheritPrototype(SubType,SuperType){
    var prototype = Object(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.color = ["red","yellow"];
}
SuperType.prototype.list = function(){
    console.log(this.color.toString());
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayName = function(){
    console.log(this.name);
};

var type1 = new SubType("Oliver",18);
var type2 = new SubType("Troy",24)
type2.color.pop();
type1.list(); //red,yellow
type2.list(); //red

应当经常使用这类形式，比较完善。

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004039317
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。