传统面向对象语言:继承是类与类之间的关系。
而在js中由于es6之前没有类的概念,所以继承是对象与对象之间的关系。
在js中,继承就是指使一个对象有权去访问另一个对象的能力。
比如:比如对象a能够访问对象b的成员(属性和方法),那么就说对象a继承于对象b;
继承的实现方式有很多,常用的有:1.原型继承、2.类式继承、3.组合继承、4.extend方法
1、原型继承:
这里在说原型继承之前我们先来谈谈js中什么是原型,以及提到原型不得不要先来说说的js对象的创建方式。
问题一:对象的创建方式
//方法一:Object构造函数方式
var Person = new Object();
Person.name = “shuaige”;
Person.age = 24;
Person.sing = function() {
console.log(‘twinkle twinkle little star’);
}
//这种方式的弊端是不能作为创建对象的模版,不能用new进行构造心对象
//方法二:对象字面量方法创建(字面量创建对象的方式优点就是解析的非常快)
var Obj = {
name : “shuaige”,
age : 24,
//定义方法
sing : function() {
console.log(‘twinkle twinkle little star’);
}
}
//调用对象中的方法
Obj.sing();
//查看对象中的属性
console.log(Obj.name);
//方法三:构造函数的方式创建对象(这里会提到构造函数存在的问题)
function Person(name, age) {//构造函数的创建过程:1.创建this = {};2.给this赋值;3.返回this
this.name = name;
this.age = age;
this.sing = function() {
console.log(‘twinkle twinkle little star’);
}
//这里其实是有个隐式的返回的:return this;
//构造函数中可以显示的指定return语句,如果返回的数据类型为基本数据类型或者null以及undefiend值都会被忽略,依旧返回的是构造函数的实例对象,但是返回的类型为引用类型,就不会忽略!
}
//实例化
var shuaige = new Person(“shuaige”, 24);
var meinv = new Person(“meinv”, 24);
//调用对象中的方法
shuaige.sing();
//查看对象中的属性
console.log(obj.name);
//问题:shuaige和meinv两个实例对象的sing方法是一个方法么
Console.log(shuaige.sing == meinv.sing);//false
//这就是构造函数方法创建对象的弊端,每个方法都要在每个实例对象中重新创建一遍,如果方法特别多,那么就会占用很多不必要的内存

为了解决构造函数创建对象中存在的问题因此而引出了原型!
Js中的原型:为了解决同类对象数据共享问题!
那么到底什么是原型?——->原型是指函数的prototype属性所引用的对象(所有函数都有prototype属性,Function除外)
改造以上构造函数方式创建对象的栗子如下: 
function Person(name) {//构造函数Person
this.name = name;
}
Person.prototype.sing = function() {
console.log("twinkle twinkle little star");
} var p1 = new Person("xiaoming");
var p2 = new Person("xiaohong");
console.log(p1.sing == p2.sing);//true 原型由此解决了数据共享的问题
Person.prototype.address = "北京”;//定义公共属性address
console.log(p1.address);//北京
console.log(p2.address);//北京
p1.address = "上海”;//添加私有属性
console.log(p1.address);//上海,自身有address属性,获取自身的address
console.log(p2.address);//北京,自身没有address属性,去原型上面去找
p1.prototype.lacation = “a”//报错 can not set property location of undefined 因为实例对象是无权修改原型上的属性和方法的
//若想改变原型上的属性和方法要通过以下方式
Person.prototype.address = “西安”
console.log(p1.address);//西安
console.log(p2.address);//西安

以上其实就是一种原型继承的方式,p1和p2都可以访问Person.prototype对象的属性和方法,所以在这里可以说是p1和p2都继承于Person.prototype;

2、类式继承(运用call方法改变this指向)

function Person(name, age) {
this.name = name;
This.age = age;
this.say = function() {
console.log(“hello”);
}
}
function Student(name, age, id) {
Person.call(this, name, age);//利用call方法能够改变this的指向,在此处调用Person构造函数,实现的是给Student实例对象添加以及赋值属性的操作
this.id = id;
this.study = function () {//构造函数的弊端,在自身上面添加公共的方法,这就需要下面的组合继承方式来规避
console.log(“弟子不必不如师”);
}
}
function Teacher(name, age, pay) {
Person.call(this, name, age);
this.pay = pay;
this.teach = function () {
console.log(“师不必不如弟子”);
}
}
var st1 = new Student(“xiaoming”, 18);
var tc1 = new Teacher(“mr Li”, 28);

3、组合继承,使用原型和类的组合方式实现继承
当Student和Teacher各自都有自己的公共方法时,可将方法添加到它们的原型上。 

function Person(name, age) {
this.name = name;
This.age = age;
this.say = function() {
console.log(“hello”);
}
}
function Student(name, age, id) {
Person.call(this, name, age);
this.id = id
}
Student.study = function () { //构造函数student的所有实例对象的公共方法
console.log(“弟子不必不如师”);
}
function Teacher(name, age, pay) {
Person.call(this, name, age);
this.pay = pay;
}
Teacher.prototype.teach = function() { //构造函数Teacher的所有实例对象的公共方法
console.log(“师不必不如弟子”);
}
var st1 = new Student(“xiaoming”, 18);
var tc1 = new Teacher(“mr Li”, 28);

4、extend方法实现继承
这里extend方法是从jq中抽取出来的,es6中有一个同样功能的方法Object.assign(); 
function A(name) {
this.name = name;
}
function B(sex) {
this.sex = sex;
this.sleep = function () {
console.log("kun kun kun~~~")
}
}
B.prototype.age = 20;
var a = new A("xiaoming");
var b = new B("boy”)
//extend方法思路:遍历parent对象中的属性以及方法并将其添加到child对象中去,从而实现继承,即child继承于parent,可以访问parent对象中的属性和方法
function extend (child, parent) {
for (var pro in parent) {
if (parent.hasOwnProperty(pro)) {//若没有这一行代码,parent对象原型上的属性和方法也会被遍历添加
child[pro] = parent[pro];
}
}
}
extend(a, b);
a.sleep();//kunkunkun~~~
console.log(a.age);//undefined;

关于创建对象的几种方式以及原型原型原型链相关知识会在日后总结。

想要做好一件事先要能够沉浸其中吧,静心做事,沉浸在代码的世界里,这也是一种享受,愿看到文章的朋友也会每天有收获,每天进步一点点。

JS继承以及继承的几种实现方式总结的更多相关文章

  1. js简繁转换,两种实现方式,妥妥的~

    不知道繁简按钮有什么卵用,大陆人自带繁简转换开关的好么,但是还是项目要求,做了这么一个功能,现在整理给大家用~完美兼容~么么哒 按钮的样式可以随便用css定义,注意id不要变,注意jq的事件绑定好就o ...

  2. hibernate笔记--继承映射关系的三种实现方式

    单表继承映射(一张表): 假设我们现在有三个类,关系如下: Person类有两个子类Student和Teacher,并且子类都具有自己独有的属性.这种实体关系在hibernate中可以使用单表的继承映 ...

  3. 1+x学习日志——js获取随机颜色的几种实现方式

    因为学习时间比较紧,所以也没多少时间发博客了.后续会慢慢补齐的,下面是代码 /// function randomColor(){ var r = parseInt(Math.random() * 2 ...

  4. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  5. js(javascript) 继承的5种实现方式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充  functio ...

  6. 【js】实现继承的6种方法

    1.原型链 基本思想:利用原型链让一个引用类型继承另一个引用类型的属性和方法. 让原型对象(B.prototype)等于另一个类型的实例(new A()), 即B.prototype = new A( ...

  7. js对象的继承以及公有私有属性的定义和读写

    最近想写一些js工具,有些方面需要用到面向对象的方法,比如继承父类属性和方法.通过私有化隐藏某些对象的属性等,因为没有系统的学习js,所以不知道怎么做,觉得很伤脑筋. 今天受到技术群里朋友的提示,并查 ...

  8. js中的继承

    js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...

  9. web前端开发必懂之一:JS继承和继承基础总结

    首先,推荐一篇博客豪情的博客JS提高: http://www.cnblogs.com/jikey/p/3604459.html ,里面的链接全是精华, 一般人我不告诉他; 我们会先从JS的基本的设计模 ...

随机推荐

  1. 【最短路径Floyd算法详解推导过程】看完这篇,你还能不懂Floyd算法?还不会?

    简介 Floyd-Warshall算法(Floyd-Warshall algorithm),是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法,与Dijkstra算法类似.该算法名称以 ...

  2. RabbitMQ在Windows环境下的安装与使用

    Windows下安装RabbitMQ 环境配置 部署环境 部署环境:windows server 2008 r2 enterprise 官方安装部署文档:http://www.rabbitmq.com ...

  3. 基于.NetCore的Redis5.0.3(最新版)快速入门、源码解析、集群搭建与SDK使用【原创】

    1.[基础]redis能带给我们什么福利 Redis(Remote Dictionary Server)官网:https://redis.io/ Redis命令:https://redis.io/co ...

  4. python基础2--数据结构(列表List、元组Tuple、字典Dict)

    1.Print函数中文编码问题 print中的编码:# -*- coding: utf-8 -*- 注:此处的#代表的是配置信息 print中的换行符,与C语言相同,为"\n" 2 ...

  5. Centos7+lnmp+zabbix4+分离mysql实验

    一.简介 1.什么是zabbix zabbix是一个企业级的.开源的.分布式的监控套件. zabbix可以对网络和服务进行完整性,健康性的监控.zabbix利用灵活的告警机制,可以实验微信,短信和邮件 ...

  6. Android SDK 开发——发布使用踩坑之路

    前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...

  7. C# 在PPT中绘制形状(shape)

    概述 本篇文章将介绍C# 在PPT幻灯片中操作形状(shape)的方法.这里主要涉及常规形状,如箭头.矩形.圆形.三角形.多边形.不规则形状等.下面的示例中,可以通过绘制形状,并设置相应格式等.示例包 ...

  8. HTML中块元素与内联元素的概念

    HTML中块元素与内联元素的概念 div就是一个块元素,所谓的块元素就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行. p h1 h2 h3 ... div这个标签没有任何语义,就是一个纯 ...

  9. PyQtdeploy-V2.4 User Guide 中文 (一)

    PyQtdeploy 用户指南 目录 介绍 与V1.0+的差异 作者 证书 安装 部署过程概览 PyQt的演示 构建演示 Android IOS Linux MacOS Windos 构建系统根目录 ...

  10. Python数据处理与计算——概述

    Python是一种面向对象的,动态的程序设计语言,具有非常简洁而清晰的语法,适合于完成各种高层任务.它既可以用来快速开发程序脚本,也可以用来开发大规模的软件. 随着NumPy.SciPy.Matplo ...