一、什么是继承?

继承是面向对象语言的一个重要概念。许多面向对象语言都支持两种继承方式:接口继承和实现继承;接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,所以ECMAScript只支持实现继承,而实现继承主要是依靠原型链来实现的。

二、继承的多种方法分析

(一)原型继承

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法;

 function Animal() {
  this.species = '动物'
  this.colors = ['白色']
}
function Cat(name, eat) {
   this.name = name
   this.eat = eat
}
Cat.prototype = new Animal()
var cat1 = new Cat('猫', '老鼠')
console.log(cat1.species) //动物
console.log(cat1.colors) //['白色']

存在的问题:

cat1.colors.push('黑色')
cat1.colors //['白色', '黑色']
cat2.colors //['白色', '黑色']

当tCat通过原型链继承了Animal后,Cat.prototype就变成了Animal的一个实例,因此它也拥有了一个自己的colors属性,结果:Cat的所有的实例都会共享colors属性;

(二)构造函数继承

基本思想:在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,因此可通过使用call()和apply()在新创建的对象上执行构造函数

 function Cat(name, eat) {

   Animal.apply(this, arguments)
  this.name = name   this.eat = eat } var cat1 = new Cat('猫', '鱼') console.log(cat1.species) //动物
cat1.colors.push('黑色')
console.log(cat1.colors) //['白色', '黑色']
var cat2 = new Cat('猫', '猫粮')
console.log(cat2.colors) //['白色']

存在问题:方法都在构造函数中定义,所以没法利用函数的复用;并且在超类型的原型中定义的方法对于子类型而言是不可见的。

function Animal() {
  this.species = '动物'
  this.colors = ['白色']
}
Animal.prototype.getColor = function() {
return this.colors
}
function Cat(name, eat) {   Animal.apply(this, arguments)
  this.name = name   this.eat = eat } var cat1 = new Cat('猫', '鱼')
cat1.getColor() //报错:cat1.getColor is not a function

(三)组合继承

基本思想:使用原型链实现对原型属性和方法的继承,而通过构造函数实现对实例属性的继承;

function Animal(species) {

  this.species = species
  this.colors = ['白色']
  }
Animal.prototype.getColor = function() {   console.log(this.colors) }
function Cat(name, eat) {   //继承属性
  this.name = name   this.eat = eat   Animal.call(this, name)
}
//继承方法
Cat.prototype = new Animal()
Cat.prototype.concatructor = Cat
Cat.prototype.sayName = function() {
  console.log(this.name)
}
var cat1 = new Cat('猫', '吃鱼') cat1.colors.push('黑色')
console.log(cat1.colors) //['白色', '黑色']
cat1.getColor() //['白色', '黑色']
cat1.sayName() //'猫' var cat2 = new Cat('波斯猫', '吃猫粮')
console.log(cat2.colors) //['白色']
cat2.getColor() //['白色']
cat2.sayName() //'波斯猫'

javascript——原型与继承的更多相关文章

  1. 深入理解:JavaScript原型与继承

    深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...

  2. JavaScript原型与继承

    JavaScript原型与继承 原型 在JavaScript中,每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象.这个原型对象为所有该实例所共享.在默认情况下,原型对象 ...

  3. JavaScript原型与继承的秘密

    在GitHub上看到的关于JavaScript原型与继承的讲解,感觉很有用,为方便以后阅读,copy到自己的随笔中. 原文地址:https://github.com/dreamapplehappy/b ...

  4. JavaScript 原型与继承

    JavaScript 原型与继承 JavaScript 中函数原型是实现继承的基础.prototype.construct.原型链以及基于原型链的继承是面向对象的重要内容 prototype 原型即 ...

  5. javascript原型链继承

    一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constru ...

  6. JavaScript 原型与继承机制详解

    引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...

  7. 8条规则图解JavaScript原型链继承原理

    原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...

  8. 【Javascript】Javascript原型与继承

    一切都是对象! 以下的四种(undefined, number, string, boolean)属于简单的值类型,不是对象.剩下的几种情况——函数.数组.对象.null.new Number(10) ...

  9. 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

  10. JavaScript原型及继承

    一.浅谈原型 首先我们要知道创建对象的方法有两种: 1.通过字面量的方式直接创建 var obj = { name:'baimao', age:21 } 2.通过构造函数创建对象 function P ...

随机推荐

  1. Node.js socket 双向通信

    使用场景:  聊天室:大量数据常驻交互: 技术栈: Node.js,     Vue.js || 原生JS 服务端代码: const app = require('http').createServe ...

  2. oracle总结: INTERVAL DAY TO SECOND, 但却获得 NUMBER

    遇到问题: INTERVAL DAY TO SECOND, 但却获得 NUMBER 操作步骤 在查询oracle数据库的时候使用到了系统提供的函数:trunc ( trunc(tb.safedate ...

  3. Android学习总结之开发工具AndroidStudio的安装与配置

    安装AndroidStudio 首先下载AndroidStudio的安装包,直接在百度AndroidStudio下载即可,安装过程简单,只需要修改安装路径(不要有空格和中文即可).然后下一步下一步就可 ...

  4. [剑指offer] 53. 表达数值的字符串

    题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...

  5. 微信小程序开发--页面之间的跳转

    一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...

  6. Java秒杀系统实战系列~构建SpringBoot多模块项目

    摘要:本篇博文是“Java秒杀系统实战系列文章”的第二篇,主要分享介绍如何采用IDEA,基于SpringBoot+SpringMVC+Mybatis+分布式中间件构建一个多模块的项目,即“秒杀系统”! ...

  7. junit的Test不能使用,报错信息:Test is not an annotation type

    在使用junit的Test做测试时,注解@Test报错”Test is not an annotation type”,发现是因为测试类的类名命名为了Test,所以导致错误. 测试类类名不能直接命名为 ...

  8. spark 源码分析之十九 -- Stage的提交

    引言 上篇 spark 源码分析之十九 -- DAG的生成和Stage的划分 中,主要介绍了下图中的前两个阶段DAG的构建和Stage的划分. 本篇文章主要剖析,Stage是如何提交的. rdd的依赖 ...

  9. 使用log4j进行日志管理

      17.1.Log4j简介 作用: 1. 跟踪代码的运行轨迹. 2. 输出调试信息. 三大组成: 1. Logger类-生成日志. 2. Appender类-定义日志输出的目的地. 3. Layou ...

  10. js 实现 联动

    使用jQuery实现联动效果 应用场景:收货地址 1.准备三个下拉框 <select class="changeArea" id='province'> <opt ...