谈谈JavaScript的2种主要继承方式
今天给自己巩固一下js的继承知识,基础不好,有不对的地方,请尽量拍砖,越重越好。
js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。
1.原型(prototype):
function Body(name,age){// 创建一个Body类 this.name = name;// 赋予基础属性name、age this.age = age; } Body.prototype.sayName =function() {// 给原型定义一个sayName的方法 console.log(this.name); } var a = new Body('wutao','10');//创建一个Body的实例对象 function Another(){} Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法 var b = new Another();//创建Another子类的实例 Another.prototype.sex ="mail";//定义子类的属性及方法 Another.prototype.saySex = function(){ console.log(this.sex); } a.sayName();//wutao b.sayName();//www 实例b拥有父类Body的方法sayName b.saySex();//mail 实例b拥有自己定义的方法saySex
2.借用构造函数(call&apply),也可以理解为组合式继承
call:
function Person(name){ this.name = name; this.sayHello = function(){ console.log(this.name); } } function Son(name,age){ Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法 this.age = age; this.sayFunc = function(){ console.log(this.name+"-"+this.age); } } var a = new Person('wutao'); var b = new Son("wwwwww",22); a.sayHello();//wutao b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello b.sayFunc();//wwwwww-22
apply:
function Person(name){ this.name = name; this.sayHello = function(){ console.log(this.name); } } function Son(name,age){ Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法 this.age = age; this.sayFunc = function(){ console.log(this.name+"-"+this.age); } } var a = new Person('wutao'); var b = new Son("ttt",222); a.sayHello();//wutao b.sayFunc();//ttt-222
js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。
有不足的地方,希望大虾大神们指出!
谈谈JavaScript的2种主要继承方式的更多相关文章
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- Javascript的一种代码结构方式——插件式
上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重.拓展.修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤 ...
- JS中5种经典继承方式
继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...
- JavaScript的几种循环使用方式及性能解析
循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...
- JavaScript中三种字符串连接方式及其性能比较
参考地址: https://www.cnblogs.com/programs/p/5554742.html 工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方 ...
- C++中的三种继承方式
1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
随机推荐
- gulp-uglify《JS压缩》----gulp系列(四)
本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img) ...
- 任督二脉之Shell中的正则表达式
VBird说学习Linux,掌握了Shell和正则就相当于打通了任督二脉,此后能力的成长才会突飞猛进. Shell的基础学习之前已经总结了一篇博客:http://www.cnblogs.com/jyz ...
- 百度分页样式代码 css+c#
通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...
- XSS 和 CSRF 攻击
web安全中有很多种攻击手段,除了SQL注入外,比较常见的还有 XSS 和 CSRF等 一.XSS(Cross Site Scripting)跨站脚本 XSS其实就是Html的注入问题,攻击者的输入没 ...
- linq order by charindex 排序 按给定字符串顺序排序
//list=list.OrderBy(ee => SqlFunctions.CharIndex("书记,主任,支部委员,村委委员,系统工作人员", ee.ZhiWu)).T ...
- 具有timeout 功能的函数调用
做项目的时候有时经常会需要一个带有timeout功能的函数调用. 比如从后台读数据并期望在给定时间内返回.借此机会包装了一个简单的C# class, 直接上代码吧. public class Time ...
- 外表cms,内在wiki的系统anwiki
比较完整面向对象的语法格式, 外表cms,内在wiki的系统 http://enanocms.org/features 比较老,php4的语法
- JavaMail入门第五篇 解析邮件
上一篇JavaMail入门第四篇 接收邮件中,控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类 ...
- [PHP] java读取PHP接口数据
和安卓是一个道理,读取json数据 PHP文件: <?php class Test{ //日志路径 const LOG_PATH="E:\phpServer\Apache\logs\\ ...
- 机器学习实战 - 读书笔记(05) - Logistic回归
解释 Logistic回归用于寻找最优化算法. 最优化算法可以解决最XX问题,比如如何在最短时间内从A点到达B点?如何投入最少工作量却获得最大的效益?如何设计发动机使得油耗最少而功率最大? 我们可以看 ...