js实现继承的5种方式 (笔记)
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种方式 (笔记)的更多相关文章
- js 实现继承的几种方式
//js中实现继承的几种方式 //实现继承首先要有一个父类,先创造一个动物的父类 function Animal(name){ this.name = name; this.shoot = funct ...
- js 实现继承的6种方式(逐渐优化)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- 深入浅出js实现继承的7种方式
给大家介绍7中js继承的方法 有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ inherita ...
- JS实现继承的几种方式
前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个 ...
- JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式
前 言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...
- JS 面向对象 ~ 继承的7种方式
前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...
- JS实现继承的几种方式(转)
转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如 ...
随机推荐
- SQLite学习笔记(十二)&&虚拟机指令
上篇文章简单讨论了虚拟机的原理,这篇文章我们详细讨论下指令,具体从几种典型的SQL语句来看看每种SQL对应的指令流,以及每个指令的含义.通过explain语句,可以看到语句对应的指令流:通过pragm ...
- OutPut子句的使用限制
Output子句很方便,多数情况下可以省略了更新后插入或者删除后插入操作表,将2个语句变成1个语句操作.不管从语句美观还是效率上都是有不错的提升, 但是对于Output自身,也是有一些限制的. 从文档 ...
- Linux下安装nginx
一直会使用nginx,也学习了好多nginx知识.也在本地安装过nginx,这次是第一次在正式的环境安装nginx,把这些记录下来总结经验. 一.安装环境 操作系统:CentOS release 6. ...
- HDOJ 2317. Nasty Hacks 模拟水题
Nasty Hacks Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
- Log4j配置详解(转)
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- Mybatis关联查询和数据库不一致问题分析与解决
Mybatis关联查询和数据库不一致问题分析与解决 本文的前提是,确定sql语句没有问题,确定在数据库中使用sql和项目中结果不一致. 在使用SpringMVC+Mybatis做多表关联时候,发现也不 ...
- EventBus使用
转自 http://blog.csdn.net/harvic880925/article/details/40660137
- python实战(开发新浪微博应用)
#coding=utf-8 """ 本应用主要功能 1.用户选择喜欢的标签加关注 2.获取用户粉丝中自己还没有关注的,->加关注,提高粉丝稳定性 3.获取用户关注列 ...