話をしてJavasript継承

前と後の2年ぐらいのjavaScriptを書いています.最初は簡単にいくつかのフォームの検証と操作domノードに使っていましたが、深く使うことができませんでした.だんだん深くなるにつれて、重複コードを書きたくなくなりました.(主:反復が速く、コードは持続的に使用でき、残業も少ない)
Demo構造関数宣言類

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

new生成例
new生成例の欠点:プロパティと方法を共有できなくなり、newの新しいインスタンスのたびにメモリ空間が新たに開発され、資源の浪費が大きい.

var personA = new Person('  ');
console.log(personA.name);

構造関数のthisは、新しい例を指します.

function Person(name){
    this.name = name;
    this.sex = ' '
}

var personA = new Person('  ');
var personB = new Person('  ');
personA.sex = ' ';
console.log(personB.sex);  // 

ここでは声明の解決策を採用しますか?設計者はこの問題をよく解決しました.それはプロトタイプ属性の導入です.
prototype属性
その利点は、インスタンスが作成されると、共有属性と方法が自動的に共有されます.

function Person(name){
    this.name = name;
}
Person.prototype.sex = ' ';
var personA = new Person('  ');
var personB = new Person('  ');
console.log(personA.sex);  // 
console.log(personB.sex);  // 

//        
Person.prototype.sex = ' ';
console.log(personA.sex);  // 
console.log(personB.sex);  // 

ここではprototypeのメリットが見えないかもしれませんが、多くの方法と属性がある場合、あなたの運行効率はまだ高いですか?

function Person(name, sex){
    this.name = name;
    this.sex = sex,
    this.country = '  ',
    this.show = function(){
        console.log(this.name + '    :'+this.country+'，  :'+this.sex);
    }
}
var personA = new Person('  '.' ');
personA.show();   //         ,  : 
var personB = new Person('  ',' ');
personB.show();  //         ,  : 

感じは大丈夫ですが、personaとpersonBは、country、showのプロパティ方法と同じ内容を含んでいます.そうすると、空間の浪費を引き起こし、効率も低下します.属性と方法を共有することができます.

function Person(name, sex){
    this.name = name;
    this.sex = sex,
}

Person.prototype.country = '  ';
Person.prototype.show = function(){
    console.log(this.name + '    :'+this.country+'，  :'+this.sex);
}

var personA = new Person('  '.' ');
var personB = new Person('  ',' ');
personA.show();   //         ,  : 
personB.show();  //         ,  : 

プロポーザルで使用する属性--isProttypeOf()に合わせて、ハスオープ

function Person(name, sex){
    this.name = name;
    this.sex = sex,
}

Person.prototype.country = '  ';
Person.prototype.show = function(){
    console.log(this.name + '    :'+this.country+'，  :'+this.sex);
}

//isPrototypeOf()             
console.log(Person.prototype.isPrototype(personA))  //true
console.log(Person.prototype.isPrototype(personB))  //true

//hasOwnPrototype()          ，     prototype  
console.log(personA.hasOwnPrototy('name'))  //true
console.log(personA.hasOwnPrototy('country'))  //false

//in         ，        prototype
console.log('name' in personA)  //true
console.log('country' in personA)  //true

constructorのプロパティ
前のPersonの原型オブジェクトを引き続き使用します.

function Person(name){
    this.name = name;
}
Person.prototype.sex = ' ';
var personA = new Person('  ');
var personB = new Person('  ');
//          constructor  
console.log(personA.constructor == Person);  //true
console.log(personB.constructor == Person);  //true

ここではinstance ofを使ってインスタンスと原型オブジェクトの関係を判断することもできます.

console.log(personA instanceof Person);  //true
console.log(personB instanceof Person);  //true

よく使われるObject間の「継承」(構築関数継承)(5つ)
今PersonとTecherの二つのObjectがあると仮定して、チームにPersonを継承してもらいたいです.

//Person  
function Person(name){
    this.name = name;
}

//Teacher  
function Teacher(age,sex){
    this.age = age;
    this.sex = sex;
}

1、:コンストラクタを利用して結びつける(callまたはappy)

function Teacher(age,sex,name){
    Person.apply(this,name);//Person.call(this,name);
    this.age = age;
    this.sex =sex;
}

2、prototypeを使って、つまり前にプロタイプの属性を話して、constructorの方向を修正します.

Teacher.prototype = new Person('xiaoming'); //  prototy      
Teacher.prototype.constructor = Teacher;
var teacher1 = new Teacher(19,' ');

3、:直接プロタイプを継承する

function Person(){}
person.prototype.name = "xiaoming";

function Teacher(age,sex){
    this.age = age;
    this.sex = sex;
}

//Teacher prototype      Person prototype  
Teacher.prototype = Person.prototype;
Teacher.prototype.constructor = Teacher
var teacher1 = new Teacher(19," ");

4、仲介new function(){}空の対象

var Fn = new function(){};
Fn.prototype = Person.prototype;
Teacher.prototype = new Fn();
Teacher.prototype.constructor = Teacher;

//    
function Extend(ChildObj,ParentObj){
    var Fn = new function(){};
    Fn.prototype = ParentObj.prototype;
    ChildObj.prototype = new Fn();
    ChildObj.prototype.constructor = ChildObj;
    ChildObj.uber = ParentObj.prototype;  //       prototype  
}

//Teacher  Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,' ');

5、コピー引継ぎ(完全)

function Extend(ChildObj, ParentObj) {
    var p = ParentObj.prototype;
    var c = ChildObj.prototype;
    for (var i in p) { 
        c[i] = p[i];
　　}
　　c.uber = p;
} 
//Teacher  Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,' ');

非構造関数「継承」(3種類)

//  
var Person = {
    name: '  '
}
var Teacher ={
    age:19,
    sex:' '
}

ここでどうやってチームをPersonを継承できますか?
1、:object方法

function object(obj){
    function Fn(){}
    Fn.prototype = obj;
    return new Fn();
}
var teacher1 = object(Person);
teacher1.age = 19;
teacher1.sex = ' ';

2、:浅いコピー方法

function extendCopy(ParentObj){
    var c = {};
    for(var i in ParentObj){
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}
//  extendCopy
var teacher1 =  extendCopy(Person);
teacher1.age = 19;
teacher1.sex = ' ';

3、:ディープコピーの方法

function extendDeepCopy(ParentObj,ChildObj){
    var ChildObj = ChildObj || {};
    for(var i in ParentObj){
        if(typeof  ParentObj[i] === 'object'){
            c[i] = (ParentObj[i].constructor === Array) ? [] : {};
            extendDeepCopy(ChildObj[i],ParentObj[i]);
        }else{
            ChildObj[i] = ParentObj[i];
        }
    }
    return ChildObj;
}

//  
var teacher1 = extendDeepCopy(Person1);
teacher1.age = 19;
teacher1.sex = ' ';

この文章の著作権は作者の共有になります.転載を歓迎します.この文を保留して、原文のリンクを提供してください.ありがとうございます.