js继承的几种方法理解和代码演示

1、属性继承 ：call 、apply:不建议使用浪费内存。

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

Person.prototype.eat = function(){
    console.log("正在吃饭")
}
Person.prototype.sleep = function(){
    console.log("正在睡觉")
}


function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)

    this.larynx = larynx;
    this.beard = beard;
    
}
Man.prototype.work = function(){
    console.log('111')
}
var songlei = new Man(10,20);
console.log(songlei);

    // Man{
        // age: undefined
        // beard: 20
        // larynx: 10
        // name: undefined
        // sex: undefined
    // }

2、原型继承：

　　缺点：原型继承会污染父级

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.eat = function(){
    console.log("正在吃饭")
}
Person.prototype.sleep = function(){
    console.log("正在睡觉")
}


function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
    
}
Man.prototype = Person.prototype;
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
        // age: undefined
        //  beard: 20
        //  larynx: 10
        //  name: undefined
        //  sex: undefined
        //  __proto__:
            //  eat: ƒ()
            //  sleep: ƒ()
            //  work: ƒ()
            //  constructor: ƒ Person(name, age, sex)
    // }
var p1 = new Person()
console.log(p1)
    // Person{
        // age: undefined
        // name: undefined
        // sex: undefined
        // __proto__:
        // eat: ƒ()
        // sleep: ƒ()
        // work: ƒ()
        // constructor: ƒ Person(name, age, sex)
    // }

3、原型拷贝：

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.eat = function(){
    console.log("正在吃饭")
}
Person.prototype.sleep = function(){
    console.log("正在睡觉")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
    
}

for(var key in Person.prototype){
    Man.prototype[key] = Person.prototype[key]
}
Man.prototype.work = function(){
    console.log('111')
}

var aaa = new Man(10,20);
console.log(aaa);
    // Man { name: undefined, age: undefined, sex: undefined, larynx: 10, beard: 20 }
    // __proto__:
    // eat: ƒ()
    // sleep: ƒ()
    // work: ƒ()
    // constructor: ƒ Man(larynx, beard, name, age, sex)
var p1 = new Person()
console.log(p1)
    // Person { name: undefined, age: undefined, sex: undefined }
    // __proto__:
    // eat: ƒ()
    // sleep: ƒ()
    // constructor: ƒ Person(name, age, sex)

4、原型链继承：

原型链：

        由__proto__组成的链条叫做原型链

　　原型链继承是不推荐使用的

        因为会多了好多无用的属性

        而且还少了constructor

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

Person.prototype.eat = function(){
    console.log("正在吃饭")
}


Person.prototype.sleep = function(){
    console.log("正在睡觉")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)

    this.larynx = larynx;
    this.beard = beard;
    
}
//    __proto        //__proto__
Man.prototype = new Person();
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     work: ƒ()
    // }
    
var p1 = new Person()
console.log(p1)
    // Person{
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__:
    //     eat: ƒ()
    //     sleep: ƒ()
    //     constructor: ƒ Person(name, age, sex)
    // }
    

5、寄生继承：

缺点：增加了无用的函数

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.type="人类";
Person.prototype.eat = function(){
    console.log("正在吃饭")
}
Person.prototype.sleep = function(){
    console.log("正在睡觉")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
    
}
//创建了一个寄生器
function fn(){};
//寄生器的原型对象 = 人类的原型对象
fn.prototype = Person.prototype;
//原型链继承   寄生器的实例对象
Man.prototype = new fn();
Man.prototype.constructor = Man;
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: ƒ Man(larynx, beard, name, age, sex)
    //     work: ƒ()
    // }

6、混合继承：我最喜欢的一种方式

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.type="人类";
Person.prototype.eat = function(){
    console.log("正在吃饭")
}
Person.prototype.sleep = function(){
    console.log("正在睡觉")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
}
//Man.prototype = Object.create(Person.prototype);
Man.prototype = {
    constructor:Man,
    __proto__:Person.prototype
}
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: ƒ Man(larynx, beard, name, age, sex)
    //     work: ƒ()
    // }
    
var p1 = new Person();
console.log(p1)
    // Person{
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__:
    //     eat: ƒ()
    //     sleep: ƒ()
    //     type: "人类"
    //     constructor: ƒ Person(name, age, sex)
    // }

7、Es6继承

ES6类的语法

            1、声明类的时候用 class

       class 类名{

            constructor(){

                属性

            }

            方法

        }

class Person{
         constructor(name,age,sex){
             this.name = name;
            this.age = age;
            this.sex = sex;
         }
         eat(){}
         sleep(){}
     }
     class Man extends Person{
             constructor(larynx,beard){
                 //实现继承必须使用super
                 super();
                 this.larynx = larynx;
                 this.beard = beard;
             }
             work(){}
     } 
    var aaa = new Man()
    console.log(aaa)
    // Man{
    //     age: undefined
    //     beard: undefined
    //     larynx: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: class Man
    //     work: ƒ work()
    // }