码迷,mamicode.com
首页 > Web开发 > 详细

JS类对象实现继续的几种方式

时间:2018-02-11 23:44:39      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:方便   log   缺点   on()   call   模板   实现   父类   post   

0. ES6可以直接使用class,extends来继承.

1.  原型继承

 1       
 2 父类:
 3 
 4       function Persion(name,age){   
 5         this.name = name;   
 6         this.age = age;   
 7        } 
 8  
 9        // 父类的原型对象属性   
10        Persion.prototype.id = 10;  
11 
12 
13        // 子类   
14        function Boy(sex){   
15         this.sex = sex;  
16        }  
17        // 继承实现   
18        Boy.prototype = new Persion(‘Yuri‘,30);  //要初始化父类不优雅~
19        var b = new Boy();  
20  
21         alert(b.name)// Yuri   
22         alert(b.id)//10  

//这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象。缺点就是父类实例传参,不是子类实例化传参,不符合常规语言的写法。

2、类继承(借用构造函数的方式继承)

//  父类   
function Persion(name,age){   
    this.name = name;   
    this.age = age;   
}  

// 父类的原型对象属性   
Persion.prototype.id = 10;  


// 子类   
function Boy(name,age,sex){   
    //call apply 实现继承  
    Persion.call(this,name,age);  
    this.sex = sex;  
}  

//Boy.prototype = new Persion(); //这个打开那个原型链对象就可以继承了.
var b = new Boy(‘Yuri‘,30,‘男‘); alert(b.name) // Yuri alert(b.id)//undinfind 父类的原型对象并没有继承

//这种原型继承的特点:继承了父类的模板,不继承了父类的原型对象。优点是方便了子类实例传参,缺点就是不继承了父类的原型对象

3. 极简主义

//定义父类
var Person = {
    createNew: function(){
      var person = {};
                 person.name=‘Yuri‘;
      person.sleep = function(){ alert("睡懒觉"); };
      return person;//返返回这个对象
    }
};
//子类
var SuperPerson={
    
      createNew:function(){
             var private; //还可以定义私有属性.
             var  superperson=Person.createNew();
             //superperson就要以使用父类的方法和属性了.
            //同时增加自己的属性
             superperson.fly=function(){}
             superperson.power="";
             return superperson;
      }
}      

var test=SuperPerson.createNew();
//使用子类的createNew就可以实现继承了.
console.log(
test.fly, test.name, test.power)   

没有使用任何的prototype,apply,call

 

 

 

 

JS类对象实现继续的几种方式

标签:方便   log   缺点   on()   call   模板   实现   父类   post   

原文地址:https://www.cnblogs.com/yuri2016/p/8443414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!