一、用function实现：

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.inherit=person;

    this.inherit(name);

    this.books = books;

}

var au=new Author("dororo","Learn much");

au.name

或者同等效力的：

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    Person.call(this, name);

    this.books = books;

}

var au=new Author("dororo","Learn much");

au.getName

由于这只是将this作为参数，调用父类Person的构造函数，把赋予父类的所有域赋予Author子类，所以任何父类Person构造函数之外的定义的域（原型prototype），子类都不会继承。所以上面例子中，au.getName将是没有被定义的（undefined），因为getName是在Person的原型对象中定义的。

而且，子类的构造函数要在定义自己的域之前调用父类构造函数，免得子类的定义被父类覆盖掉。也就是说，Author定义属性book要在Person.call之后，否则会被Person中属性覆盖。同时，在子类中也最好不要用prototype来定义子类的函数域，因为在一个子类被new，实例化之后就要执行prototype，然后才是调用父类的构造函数，这样也容易被父类的属性覆盖掉。

二、用prototype实现：

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.books = books;

}

Author.prototype=new Person(name);

Author.prototype.constructor=Author;

Author.prototype.getBooks = function() {

    return this.books;

}

var au1=new Author("dororo1","Learn much");

var au2=new Author("dororo2","Learn less");

alert(au1.getName());

alert(au2.getName());

这种方法避免了function实现中，无法继承prototype的问题。因为 Author.prototype=new Person(name);new Person（）实例会调用Person构造和原型的所有属性。但是缺点是已经实例化了Author.prototype。所以当子类实例化的时候，所有非基本数据类型都是reference copy。所以上面例子中，无论实例au1,还是au2返回的值都是dororo1.

三、用“混合”实现

function Person(name) {

    this.name = name;

}

Person.prototype.getName = function() {

    return this.name;

}

function Author(name, books) {

    this.base = new Person(name);

    for(var key in this.base){

        if(!this[key]){

           this[key]=this.base[key];

           }

           }

    this.book=books;

}

var au1=new Author("dororo1","work");

var au2=new Author("dororo2","play");

alert(au1.getName());

alert(au2.getName());

au1.book;

au2.book;

属于扩展，把父类的所有域都拷贝到子类。完全没有上述两方面的问题。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script type="text/javascript">

// ------------------------继承的第一种方式：对象冒充-----------------------------

function Parent(name) { this.name = name; this.showInfo = function () { document.write(name); document.write("</br>"); } }

function Children(name, pwd) {//下面三行代码实现了子对象和父对象指向同一个引用//关键的代码this.method = Parent;this.method(name);delete this.method;

this.pwd = pwd;this.showMsg = function () {document.write(this.pwd);document.write("</br>");}}

var parent = new Parent("John");var child = new Children("Bob", 123);

parent.showInfo();child.showInfo();child.showMsg();

document.write("");document.write("</br>");

//call方法，是function里的一个方法。

//------------------------call方法简单示例-------------------------------

function test(str) {document.write(this.name + "," + str+"</br>");}

var person = new Object();person.name = "anllin";

//相当于调用了test方法test.call(person, "welcome"); //将person赋给了test里的this。

document.write("");document.write("</br>");

//--------------------继承的第二种方式，call方法------------------------------

function Father(name) {this.name = name;this.showName = function () {document.write(this.name + "</br>");}}

function Sub(name, pwd) {//关键的代码Father.call(this, name);

this.pwd = pwd;this.showPwd = function () {document.write(this.pwd + "<br>");}}

var father = new Father("Father");var sub = new Sub("Sub", 123456);father.showName();sub.showName();sub.showPwd();

document.write("");document.write("</br>");

//--------------------继承的第三种方式，apply方法------------------------------

function Mother(name) {this.name = name;this.showName = function () {document.write(this.name + "</br>");}}

function Daugther(name, pwd) {//关键的代码Mother.apply(this, new Array(name));

this.pwd = pwd;this.showPwd = function () {document.write(this.pwd + "<br>");}}

var mother = new Father("Mother");var daugther = new Sub("Daugther", 654321);mother.showName();daugther.showName();daugther.showPwd();

document.write("");document.write("</br>");

//--------------------继承的第四种方式，prototype chain方式------------------------------

//缺点：无法给构造函数传参数。

function Human(){ }

Human.prototype.name = "human";Human.prototype.showName = function () {document.write(this.name+"<br>");}

function Student() { }

//关键的代码Student.prototype = new Human();

Student.prototype.password = 456789;Student.prototype.showPwd = function () {document.write(this.password + "<br>");}

var human = new Human();var student = new Student();student.name = "student";human.showName();student.showName();student.showPwd();

document.write("");document.write("</br>");

//--------------------继承的第五种方式，混合方式------------------------------

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

FatherClass.prototype.showName = function () {document.write(this.name + "<br>");}

function SubClass(name, pwd) {

//关键的代码

FatherClass.call(this,name);this.pwd = pwd;}

//关键的代码

SubClass.prototype = new FatherClass;

SubClass.prototype.showPwd = function () {document.write(this.pwd + "<br>");}

var f = new FatherClass("FatherClass");var s = new SubClass("SubClass", 45678);f.showName();s.showName();s.showPwd();

</script> </body> </html>

js继承的几种实现方法的更多相关文章

  1. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  2. js面向对象初步探究（上） js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  3. JS中的五种去重方法

    JS中的五种去重方法 第一种方法: 第二种方法:  第三种方法: 第四种方法: 第五种方法:优化遍历数组法 思路:获取没重复的最右一值放入新数组 * 方法的实现代码相当酷炫,* 实现思路:获取没重复的 ...

  4. js继承的几种方法和es6继承方法

        一.原型链继     1.基本思想     利用原型链来实现继承,超类的一个实例作为子类的原型     2.具体实现     function F() {}     //原型属性,原型方法: ...

  5. js 继承的几种方式

    JS继承的实现方式: 既然要实现继承,那么首先我们得有一个父类,代码如下: function Animal(name) { // 属性 this.name = name || '小白'; // 实例方 ...

  6. js里面的三种注释方法

    javascript(js)语言里面的注释方法有三种. 第一种是多行注释"/**/",一般js文件开头,介绍作者,函数等信息. /* *author:xxx *day:2008-0 ...

  7. JS中的两种刷新方法以及区别和适用范围

    在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...

  8. JS去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  9. 实现JS继承的几种方法

    总的来说,JS的继承大体上分为两种:借用构造函数方式和原型方式 首先,我们来看看借用构造函数方式的几种做法: //方式一function Person(name, sex){ this.name = ...

随机推荐

  1. udp之关于linux udp收发包缓冲区大小

    1.修订单个socket的缓冲区大小:通过setsockopt使用SO_RCVBUF来设置接收缓冲区,该参数在设置的时候不会与rmem_max进行对比校验,但是如果设置的大小超过rmem_max的话, ...

  2. Linux安装-kickstart无人值守安装

    Linux安装-kickstart无人值守安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家做运维估计都避免不了时不时会去机房安装一台linux服务器,但是服务器启动的特别慢 ...

  3. pyppeteer 报错-无法连接到浏览器

    问题 程序报错: Failed to connect to browser port: http://127.0.0.1:57899/json/version 原因 虽然pyppeteer在首次启动时 ...

  4. Java编程思想 学习笔记7

    七.复用类 1.组合语法 在新的类中产生现有类的对象.由于新的类是由现有类的对象所组成,所以这种方法叫做组合. 类中域为基本类型时能够自动被初始化为零.对象引用被初始化为null. 编译器不是简单地为 ...

  5. ThinkPHP 3.2 DEMO案例系列【phpmailer批量发送邮件】

    但是邮件和短信相比在一些场景依然有着重要的意义和优势: 1:零成本:发邮件没有费用: 2:内容丰富且量大:邮件可以长篇大论:图文并茂: 3:增加访问量:用户很容易通过邮件中的链接访问网站: 好了:下面 ...

  6. 在Eclipse中利用maven整合搭建ssm框架

    首先说明用到的框架: spring  +  springMVC  +  mybatis 构建工具:maven 开发工具:eclipse 开发环境:win10      java版本:jdk1.8    ...

  7. vue.js初始学习笔记&vue-cli

    笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...

  8. MySql Workbench导出ER图并存为PDF文件

    一.登陆数据库 二.点击Database  => Reverse Engineer 三.填入登陆信息后next => next,选择要生成ER模型的数据库 四.点击next => n ...

  9. pandas数据表

    安装  pip3 install pandas s=pd.Series([1,3,6,90,44,1])   #创建序列[用列表创建].数据源的维度必须是一维 #data  指定数据源 print(s ...

  10. JavaScript之字符串匹配工具[插件]

    /*** * StringCheckUtil * 字符串检测工具 * * @version 1.0 * @method isNum(string,scope) * @method isChinese( ...