js实现继承的5种方式

以下 均为 ES5 的写法:

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式

1.使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

function Parent(firstname)

{

this.fname=firstname;

this.age=40;

this.sayAge=function()

{

console.log(this.age);

}

}

function Child(firstname)

{

this.parent=Parent;

this.parent(firstname);

delete this.parent;

this.saySomeThing=function()

{

console.log(this.fname);

this.sayAge();

}

}

var mychild=new Child("李");

mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

function Parent(firstname)

{

this.fname=firstname;

this.age=40;

this.sayAge=function()

{

console.log(this.age);

}

}

function Child(firstname)

{

this.saySomeThing=function()
{
console.log(this.fname);
this.sayAge();
}

this.getName=function()

{

return firstname;

}

}

var child=new Child("张");

Parent.call(child,child.getName());

child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

function Parent(firstname)

{

this.fname=firstname;

this.age=40;

this.sayAge=function()

{

console.log(this.age);

}

}

function Child(firstname)

{

this.saySomeThing=function()
{
console.log(this.fname);
this.sayAge();
}
this.getName=function()
{
return firstname;
}

}

var child=new Child("张");

Parent.apply(child,[child.getName()]);

child.saySomeThing();

4.采用原型链的方式实现继承

实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

function Parent()

{

this.sayAge=function()
{
console.log(this.age);
}

}

function Child(firstname)

{

this.fname=firstname;

this.age=40;

this.saySomeThing=function()

{

console.log(this.fname);

this.sayAge();

}

}

Child.prototype=new Parent();

var child=new Child("张");

child.saySomeThing();

5.采用混合模式实现继承

function Parent()

{

this.sayAge=function()
{
console.log(this.age);
}

}

Parent.prototype.sayParent=function()

{

alert("this is parentmethod!!!");

}

function Child(firstname)

{

Parent.call(this);

this.fname=firstname;

this.age=40;

this.saySomeThing=function()

{

console.log(this.fname);

this.sayAge();

}

}

Child.prototype=new Parent();

var child=new Child("张");

child.saySomeThing();

child.sayParent();

js实现继承的5种方式 (笔记)的更多相关文章

  1. js 实现继承的几种方式

    //js中实现继承的几种方式 //实现继承首先要有一个父类,先创造一个动物的父类 function Animal(name){ this.name = name; this.shoot = funct ...

  2. js 实现继承的6种方式(逐渐优化)

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  4. js实现继承的5种方式

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  5. 深入浅出js实现继承的7种方式

    给大家介绍7中js继承的方法 有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ inherita ...

  6. JS实现继承的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个 ...

  7. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  8. JS 面向对象 ~ 继承的7种方式

    前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...

  9. JS实现继承的几种方式(转)

    转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如 ...

随机推荐

  1. SQLite学习笔记(十二)&&虚拟机指令

    上篇文章简单讨论了虚拟机的原理,这篇文章我们详细讨论下指令,具体从几种典型的SQL语句来看看每种SQL对应的指令流,以及每个指令的含义.通过explain语句,可以看到语句对应的指令流:通过pragm ...

  2. OutPut子句的使用限制

    Output子句很方便,多数情况下可以省略了更新后插入或者删除后插入操作表,将2个语句变成1个语句操作.不管从语句美观还是效率上都是有不错的提升, 但是对于Output自身,也是有一些限制的. 从文档 ...

  3. Linux下安装nginx

    一直会使用nginx,也学习了好多nginx知识.也在本地安装过nginx,这次是第一次在正式的环境安装nginx,把这些记录下来总结经验. 一.安装环境 操作系统:CentOS release 6. ...

  4. HDOJ 2317. Nasty Hacks 模拟水题

    Nasty Hacks Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  5. 【原】让H5页面适配移动设备全家 - 前端篇 - PPT

    7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...

  6. Log4j配置详解(转)

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  8. Mybatis关联查询和数据库不一致问题分析与解决

    Mybatis关联查询和数据库不一致问题分析与解决 本文的前提是,确定sql语句没有问题,确定在数据库中使用sql和项目中结果不一致. 在使用SpringMVC+Mybatis做多表关联时候,发现也不 ...

  9. EventBus使用

    转自 http://blog.csdn.net/harvic880925/article/details/40660137

  10. python实战(开发新浪微博应用)

    #coding=utf-8 """ 本应用主要功能 1.用户选择喜欢的标签加关注 2.获取用户粉丝中自己还没有关注的,->加关注,提高粉丝稳定性 3.获取用户关注列 ...