谈谈javascript中原型继承

什么是继承?
拿来主义:自己没有,别人有,把别人的拿过来使用或者让其成为自己的

 如何实现继承的方式

  • 原型继承
  • 混入继承
  • 经典继承
1. 混入继承
由于一个对象可以继承自任意的对象,即:o可以继承自对象o1,o2,o3...,所以,把这种继承称为:混入继承
  • 将其他对象中的成员加到自己身上
  • 对象可以继承自任意的对象
var o1 = {name:"女娲", age: 1, gender: "female"}; var o2 = {grade: "三年级二班", score: 100}; // o2 继承 o1 for ( var k in o1 ) { o2[k] = o1[k]; } // 如果希望 o2 可以继承自任意的对象. 所以为了简化继承的代码 // 给 o2 提供一个方法, 叫 extend o2.extend = function (obj) { for (var k in obj) { this[k] = obj[k]; } } o2.extend(o1); // o2 继承 o1 
2 原型继承
如果需要让一个对象拥有某些属性和方法,可以把这些属性和方法放到原型对象中,因为对象会继承自原型对象,所以就获得了该属性和方法。把这种继承方式称为:原型继承
  • 实现继承的方式
1 利用对象的动态特性  添加成员
2 覆盖原型对象        添加成员
3 利用混入继承        添加成员
  • 原型的一些结论
1 任何函数都可以作为构造函数
2 函数默认就有一个 prototype 属性
3 函数的prototype 就是 原型
4 构造函数的prototype的类型是对象 
5 通过构造函数创建出来的对象默认链接到构造函数的prototype中
6 原型的成员(属性和方法)可以被对象共享
2.1 原型继承实现方式
  • 1 利用对象的动态特性
// 对象可以动态的添加属性
var o = {};
o.name = "川川"; o.age = 19; o.gender = "男"; // ----------------------- function Person() {} // 将需要的属性添加到原型对象中 Person.prototype.sayHi = function() {}; var p = new Person(); p.sayHi(); 
  • 2 覆盖原型对象
Person.prototype = {
    sayHi: function() {}, sayNo: function() {}, sayYouAgin: function() {} }; 
注意:
使用覆盖原型对象方式实现继承的时候, 
推荐给这个新对象添加一个 constructor 属性(属性的值为:当前的构造函数)
目的是保持和 默认情况的原型结构一样(模拟对象的类型)

但是如果对对象的类型要求不严格可以忽略

constructor: Person
  • 3 利用混入继承添加原型成员
对象2.extend( 对象1 )

3 经典继承 - Object.create

  • 1 创建对象
  • 2 让创建出来的对象继承自参数对象
诠释 继承是什么。

ES5提供的方法(IE9+ 开始支持)
提出者:Douglas Crockford(道格拉斯 克罗克福德) JSON作者 《JavaScript语言精粹》
作用:实现继承,即:让一个对象(o2)继承自另外一个对象(o1)
var o2 = Object.create( o1 );
  • 基本语法:
var o1 = { 
    sayHi: function() { alert("hello,i am chuanchuan"); } }; var o2 = Object.create(o1); o2.sayHi(); 
  • 两种实现兼容的方式
// 1 给原生对象添加成员
if(!Object.create) { Object.create = function() { // 构造函数 function F() {} // 继承 F.prototype = obj; return new F(); }; } // 2 统一使用新方法(推荐) var create = function( obj ) { if ( Object.create ) { return Object.create( obj ); } else { function F() {} F.prototype = obj; return new F(); } }

转载于:https://www.cnblogs.com/lsy0403/p/5866573.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值