一、什么是继承?

继承是面向对象语言的一个重要概念。许多面向对象语言都支持两种继承方式:接口继承和实现继承;接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,所以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. linux应用程序设计--GDB调试

    GDB简介:GDB是GNU发布的一款功能强大的程序调试工具,GDB主要完成下面三个方面功能: 一.GDB的使用操作 1.启动被调试程序. 2.让被调试的程序在指定的位置停住. 3.当程序被停住时,可以 ...

  2. 预学第二天:计算机的基础知识+python安装+pycharm安装+思维导图

    目录 计算机的基础知识 计算机是由什么组成的 什么是操作系统

  3. 【栈-例题】网页跳转-C++

    描述 蒜头君每天都在用一款名为 "蒜厂浏览器" 的软件.在这个浏览器中,一共三种操作:打开页面.回退和前进.它们的功能如下: 打开页面:在地址栏中输入网址,并跳转到网址对应的页面: ...

  4. 整型,布尔值,字符串详解,for语句 练习

    2019 年 7 月 8 日 1.将今天的课上的代码敲一遍,然后整理笔记 已完成 2.有变量name = "aleX leNb" 完成如下操作: 移除 name 变量对应的值两边的 ...

  5. Ubuntu中目录右下角的锁标志

    在ubuntu中如果是用root权限创建的目录,在普通权限下展示时则会出现一个锁的标志,表明该目录是一个受保护的目录(只读,不能写入和删除),普通权限无法对其进行操作.如用命令sudo mkdir d ...

  6. 个人永久性免费-Excel催化剂功能第34波-提取中国身份证信息、农历日期转换相关功能

    这两天又被刷朋友圈,又来了一个自主研发红芯浏览器,国产啊国产,这是谁的梦.就算国产了,自主了,无底线的夸大吹嘘无道德,企业如是,国家如是,大清已亡!再牛B的技术落在天天删敏感信息.无法治.无安全感可言 ...

  7. [PTA] 1002. 写出这个数 (Basic)

    import java.util.*; public class Main { public static void main(String[] args) { Scanner sc = new Sc ...

  8. 【译】宣告推出.NET Core 3.0 Preview 7(英雄的黎明)

    今天,我们宣布推出.NET Core 3.0 Preview 7.我们已经从创建新特性阶段过渡到了完善版本阶段.对于其余的预览版,我们将把重点放在质量(改进)上. 在Windows,macOS和Lin ...

  9. net core 序列化与反序列化与遇到的几个坑

    之前在C#里面序列化直接引入命名空间后使用JavaScriptSerializer jss = new JavaScriptSerializer();就可以用, 而net core里面不这样用了,我们 ...

  10. 入门webpack,看这篇就够了

    什么是webpack? 官网给出的概念是:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递 ...