谈一谈javascript中继承的多种方式

JS 是没有继承的，不过可以曲线救国，利用构造函数、原型等方法实现继承的功能。

var o=new Object();

其实用构造函数实例化一个对象，就是继承，这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法，其实访问的是其原型对象的方法，所有的方法都是放在原型中而不是类中。

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object是万物祖先，Everything is object 嘛。 

1、内置对象都继承自object

var myNumber = new Number(10); //实例化一个数字对象

字符串对象，其实是String对象的一个实例化 

var s = ‘str';

 除了可以访问自身属性方法，还能访问父类属性方法

console.log(s.toUpperCase());
console.log(s.toString());

2、自定义对象的继承

// 父类
var Person = function(){
this.name='AV老师';
this.test='测试中的毕福剑';
}
Person.prototype={
say:function(){
console.log('呀买碟');
}
}
// 构造函数
var Canglaoshi = function(name,age,cup){
this.name=name;
this.age=age;
this.cup=cup;
}
// 继承person,则拥有person原型中的方法
Canglaoshi.prototype=new Person();
Canglaoshi.prototype.ppp=function(){
console.log('啪啪啪');
}
// 苍老师拥有了person中的方法
var xiaocang=new Canglaoshi('空空',18,'E');
xiaocang.say();
console.log(xiaocang.name);
console.log(xiaocang.age);
console.log(xiaocang.cup);
console.log(xiaocang.test);

3、自定义对象继承的原型链演示

(function() {
//父类
function SuperParent() {
this.name = 'mike';
}
//子类继承父亲 - 二次继承：
function Parent() {
this.age = 12;
}
Parent.prototype = new SuperParent(); //通过原型，形成链条
var parent = new Parent();
console.log("测试父亲可以访问爷爷属性：" + parent.name);
console.log("测试父亲可以访问自己的属性：" + parent.age);
//继续原型链继承 - 三次继承
function Child() { //brother构造
this.weight = 60;
}
Child.prototype = new Parent(); //继续原型链继承
//原型链测试2
//儿子集成爷爷
var child = new Child();
console.log("测试儿子可以访问爷爷的属性：" + child.name); //继承了Parent和Child,弹出mike
console.log("测试儿子可以访问父亲的属性：" + child.age); //弹出12
console.log("测试儿子可以访问自己独特的属性：" + child.weight); //弹出12
//原型链测试
//爷爷可以访问Object中的方法
var test = new SuperParent();
console.log(test.name);
console.log(test.toString());
//访问链： SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象（找到toString方法）--》null
console.log(child.name);
//原型链：首先访问Child构造函数，发现没有name属性--》寻找__proto__，判断起指针是否为空--》指向Child原型函数，寻找有没有name属性--》
//---》没有找到，则判断其__proto__属性是否为null，如果不为null，继续搜索--》找到parent对象，检查是否有name属性，没有。。。。
})()

4、构造函数继承

(function() {
function People() {
this.race = '人类';
}
People.prototype = {
eat: function() {
alert('吃吃吃');
}
}
/*人妖对象*/
function Shemale(name, skin) {
People.apply(this, arguments); // 用call也是一样的，注意第二个参数
this.name = name;
this.skin = skin;
}
//实例化
var zhangsan = new Shemale('张三', '黄皮肤')
console.log(zhangsan.name); //张三
console.log(zhangsan.skin); //黄皮肤
console.log(zhangsan.race); //人类
})()

5、组合继承

(function() {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {}
function Man(name, age, no) {
/*会自动调用Person的方法，同时将name age传递过去*/
Person.call(this, name, age);
//自己的属性
this.no = no;
}
Man.prototype = new Person();
var man = new Man("张三", 11, "0001");
console.log(man.name);
console.log(man.age);
console.log(man.no);
})()

6、拷贝继承

<script>
+(function() {
var Chinese = {
nation: '中国'
};
var Doctor = {
career: '医生'
};
//  请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？
//  这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。
function extend(p) {
var c = {};
for (var i in p) {　　　　　
c[i] = p[i];　　　　
}
c.uber = p;
return c;
}
var Doctor = extend(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
})()
</script>

7、寄生组合继承

<script>
+(function() {
/*继承的固定函数*/
function inheritPrototype(subType, superType) {
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function Person(name) {
this.name = name;
}
Person.prototype.say = function() {}
function Student(name, age) {
Person.call(this, name);
this.age = age;
}
inheritPrototype(Student, Person);
var xiaozhang = new Student('小张', 20);
console.log(xiaozhang.name)
})()
</script>

8、使用第三方框架实现继承

<script src='simple.js'></script>
<!-- 使用的第三方框架simple.js -->
<script>
+(function() { < script >
var Person = Class.extend({
init: function(age, name) {
this.age = age;
this.name = name;
},
ppp: function() {
alert("你懂的");
}
});
var Man = Person.extend({
init: function(age, name, height) {
this._super(age, name);
this.height = height;
},
ppp: function() {
/*调用父类的同名方法*/
this._super();
/*同时又可以调用自己的方法*/
alert("好害羞 -，- ");
}
});
var xiaozhang = new Man(21, '小张', '121');
xiaozhang.ppp();
})()

希望对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

• 简单的JS多重继承示例
• 深入理解JavaScript继承的多种方式和优缺点
• JavaScript mixin实现多继承的方法详解
• JS 面向对象之继承---多种组合继承详解
• ExtJS4中使用mixins实现多继承示例
• 用JavaScript实现单继承和多继承的简单方法
• Javascript基于对象三大特性（封装性、继承性、多态性）
• js中实现多态采用和继承类似的方法
• javascript 面向对象全新理练之继承与多态
• JavaScript实现多重继承的方法分析