javascript中最常用的继承模式 组合继承
<script type="text/javascript">
//创建基类
function Person(name, age) {
this.name = name;
this.age = age;
}
//通过原型方式给基类添加函数(这样可以服用此函数)
Person.prototype.showName = function () {
alert(this.name);
}
//创建子类
function Student(name, age, score) {
this.score = score;
Person.call(this,name,age);
}
//把父类的实例赋值给子类的原型
Student.prototype = new Person();
//通过原型方式给子类添加函数(这样可以服用此函数)
Student.prototype.showScore = function () {
alert(this.score);
}
//以下为使用
var student = new Student("zhangsan", 22, 100);
student.showName();
student.showScore();
var stu = new Student("lisi", 25, 200);
stu.showName();
stu.showScore();
</script>
相关推荐
-
浅谈js对象的创建和对6种继承模式的理解和遐想
JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫女娲造人吧. 创建对象 女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造.这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具)). 但是机器造人同样也比较麻烦(挖土.和泥.捏眼睛.捏鼻子...
-
JavaScript中创建对象和继承示例解读
对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 复制代码 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor 如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性 如: 复制代码 代码如下: function F(){}; F.prototype={
-
JS 面向对象之继承---多种组合继承详解
这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.n
-
理解js对象继承的N种模式
本文分享了js对象继承的N种模式,供大家参考. 一.原型链继承 function Person(){}; Person.prototype = { constructor: Person, name: "Oliver" }; function People(){}; People.prototype = new Person(); People.prototype.constructor = People; People.prototype.sayName = function(){
-
javascript中最常用的继承模式 组合继承
复制代码 代码如下: <script type="text/javascript"> //创建基类 function Person(name, age) { this.name = name; this.age = age; } //通过原型方式给基类添加函数(这样可以服用此函数) Person.prototype.showName = function () { alert(this.name); } //创建子类 function Student(name, age,
-
JavaScript进阶教程之非extends的组合继承详解
目录 前言 一:call() 的作用与使用 1.1 使用 call() 来调用函数 1.2 使用 call() 来改变 this 的指向 二:利用构造函数继承父属性 2.1 实现过程 2.1 实现过程分析 三:利用原型对象继承父方法 3.1 继承父方法的错误演示 3.2 继承父方法的正确做法 3.2 继承父方法的注意事项 总结 前言 继承也是面向对象的特性之一,但是在 ES6 版本之前是没有 extends 去实现继承的,我们只能通过 构造函数 和 原型对象 来实现继承,其中分别为构造函数来继承
-
JavaScript中一些常用的正则表达式(推荐)
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. var validateRegExp = { decmal: "^([+-]?)\\d*\\.\\d+$", // 浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", // 正浮点数 decmal2: "^-([1-9]\\d*.\\d*|
-
JS继承之借用构造函数继承和组合继承
借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术(有时候也叫做伪造对象或经典继承).这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数. 基本模式 function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //继承了S
-
[js高手之路]从原型链开始图解继承到组合继承的产生详解
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.protot
-
JavaScript中创建对象的7种模式详解
ECMA-262把对象定义为:"无需属性的集合,其属性可以包含基本值.对象或者函数."严格来讲,这就相当于说明对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数. 创建自定义对象最简单的方式就是创建一个Object的实例,然后再为他添加属性和方法,如下所示: var person = new Object();.person.name = &qu
-
在JavaScript中模拟类(class)及类的继承关系
Javascipt语法不支持"类"(class)[es6已经支持],但是有模拟类的方法.今天我主要谈谈Javascipt中模拟"类"的方法及js中继承的总结和回顾. js中实现"类"与继承,既是重点,又是难点.很多同学可能都对js中"类"与继承都有所了解,但是深入剖析的时候,感觉力不从心.模棱两可. 我们先来总结一下js定义"类"的几种方法: 方法一:构造函数法 这个方法是比较经典的方法,我们会经常见到.生
-
由JavaScript中call()方法引发的对面向对象继承机制call的思考
起因: 今天在阅读snandy大神的读jQuery之五(取DOM元素)时,看到有讲到toArray()方法,具体jQuery代码如下: 复制代码 代码如下: toArray: function() { return slice.call( this, 0 ); }, get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( n
-
JavaScript中最常用的10种代码简写技巧总结
前言 本文主要给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?下面话不多说了,来看看详细的介绍: 一.三元操作符 当想写if-else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater
随机推荐
- Vue.js组件通信的几种姿势
- Bootstrap模仿起筷首页效果
- mysql报错1033 Incorrect information in file: ‘xxx.frm’问题的解决方法
- mysql 5.7.10 安装配置方法图文教程
- Linux+php+apache+oracle环境搭建之CentOS下源码编译安装PHP
- Python复制文件操作实例详解
- 使用VMware为centos添加硬盘
- 详解centos下搭建redis集群
- JS简单获取当前年月日星期的方法示例
- android push推送相关基本问答总结
- 数据库查询记录php 多行多列显示
- jquery动态切换背景图片的简单实现方法
- Spring Hibernate实现分页功能
- Javascript基础教程之变量
- PHP实现的登录页面信息提示功能示例
- C语言中K-means算法实现代码
- python在文本开头插入一行的实例
- elementUI table表格动态合并的示例代码
- JS求1到任意数之间的所有质数的方法详解
- Eclipse在线安装hibernate插件