javascript——原型与继承
一、什么是继承?
继承是面向对象语言的一个重要概念。许多面向对象语言都支持两种继承方式:接口继承和实现继承;接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,所以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——原型与继承的更多相关文章
- 深入理解:JavaScript原型与继承
深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...
- JavaScript原型与继承
JavaScript原型与继承 原型 在JavaScript中,每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象.这个原型对象为所有该实例所共享.在默认情况下,原型对象 ...
- JavaScript原型与继承的秘密
在GitHub上看到的关于JavaScript原型与继承的讲解,感觉很有用,为方便以后阅读,copy到自己的随笔中. 原文地址:https://github.com/dreamapplehappy/b ...
- JavaScript 原型与继承
JavaScript 原型与继承 JavaScript 中函数原型是实现继承的基础.prototype.construct.原型链以及基于原型链的继承是面向对象的重要内容 prototype 原型即 ...
- javascript原型链继承
一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constru ...
- JavaScript 原型与继承机制详解
引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...
- 8条规则图解JavaScript原型链继承原理
原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: ...
- 【Javascript】Javascript原型与继承
一切都是对象! 以下的四种(undefined, number, string, boolean)属于简单的值类型,不是对象.剩下的几种情况——函数.数组.对象.null.new Number(10) ...
- 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链
1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...
- JavaScript原型及继承
一.浅谈原型 首先我们要知道创建对象的方法有两种: 1.通过字面量的方式直接创建 var obj = { name:'baimao', age:21 } 2.通过构造函数创建对象 function P ...
随机推荐
- Node.js socket 双向通信
使用场景: 聊天室:大量数据常驻交互: 技术栈: Node.js, Vue.js || 原生JS 服务端代码: const app = require('http').createServe ...
- oracle总结: INTERVAL DAY TO SECOND, 但却获得 NUMBER
遇到问题: INTERVAL DAY TO SECOND, 但却获得 NUMBER 操作步骤 在查询oracle数据库的时候使用到了系统提供的函数:trunc ( trunc(tb.safedate ...
- Android学习总结之开发工具AndroidStudio的安装与配置
安装AndroidStudio 首先下载AndroidStudio的安装包,直接在百度AndroidStudio下载即可,安装过程简单,只需要修改安装路径(不要有空格和中文即可).然后下一步下一步就可 ...
- [剑指offer] 53. 表达数值的字符串
题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...
- 微信小程序开发--页面之间的跳转
一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...
- Java秒杀系统实战系列~构建SpringBoot多模块项目
摘要:本篇博文是“Java秒杀系统实战系列文章”的第二篇,主要分享介绍如何采用IDEA,基于SpringBoot+SpringMVC+Mybatis+分布式中间件构建一个多模块的项目,即“秒杀系统”! ...
- junit的Test不能使用,报错信息:Test is not an annotation type
在使用junit的Test做测试时,注解@Test报错”Test is not an annotation type”,发现是因为测试类的类名命名为了Test,所以导致错误. 测试类类名不能直接命名为 ...
- spark 源码分析之十九 -- Stage的提交
引言 上篇 spark 源码分析之十九 -- DAG的生成和Stage的划分 中,主要介绍了下图中的前两个阶段DAG的构建和Stage的划分. 本篇文章主要剖析,Stage是如何提交的. rdd的依赖 ...
- 使用log4j进行日志管理
17.1.Log4j简介 作用: 1. 跟踪代码的运行轨迹. 2. 输出调试信息. 三大组成: 1. Logger类-生成日志. 2. Appender类-定义日志输出的目的地. 3. Layou ...
- js 实现 联动
使用jQuery实现联动效果 应用场景:收货地址 1.准备三个下拉框 <select class="changeArea" id='province'> <opt ...