一、什么是继承?

继承是面向对象语言的一个重要概念。许多面向对象语言都支持两种继承方式:接口继承和实现继承;接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,所以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. secureCRT背景颜色

    secureCRT是我们常用的linux远程登录软件,某些情况下我们安装的secureCRT工具可能默认背景颜色为白色,使用时很容易造成眼睛的疲劳,网上有些教程也只是修改当前登录窗口背景颜色,新的连接 ...

  2. 手机web app开发笔记

    各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...

  3. 洛谷 P1311 【选择客栈】

    枚举在那个咖啡店喝咖啡 想要计算咖啡店两侧同色的客栈的对数 枚举i求和(左边第i种颜色的个数*右边第i种颜色的个数) 前缀和+后缀和 f[i][j]f[i][j]f[i][j]表示到第i家客栈及之前颜 ...

  4. PJzhang:python基础入门的7个疗程-five

    猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第十三天:代码组织 类是 ...

  5. 【机器学习理论】换底公式--以e,2,10为底的对数关系转化

    我们在推导机器学习公式时,常常会用到各种各样的对数,但是奇怪的是--我们往往会忽略对数的底数是谁,不管是2,e,10等. 原因在于,lnx,log2x,log10x,之间是存在常数倍关系. 回顾学过的 ...

  6. Node.js socket 双向通信

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

  7. JedisClient操作redis 单机版和集群版

    一.在pom文件中添加依赖 <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency&g ...

  8. 使用c++开发跨平台的程序

    使用c++开发跨平台的程序 背景 在开发过程中,使用c++作为开发语言,通常被认为是痛苦的,啰嗦的,超长开发时间的.最近几年有各种各样的语言被广泛使用,相对比来说c++不是那么出彩.c++虽然年龄大, ...

  9. JDBC连接mysql数据库操作详解

    1.什么是JDBC JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Jav ...

  10. 二、PyTorch 入门实战—Variable(转)

    目录 一.概念 二.Variable的创建和使用 三.标量求导计算图 四.矩阵求导计算图 五.Variable放到GPU上执行 六.Variable转Numpy与Numpy转Variable 七.Va ...