js怎样实现继承
js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.parent=Parent;
- this.parent(firstname);
- delete this.parent;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- var mychild=new Child("李");
- mychild.saySomeThing();
2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.call(child,child.getName());
- child.saySomeThing();
3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.apply(child,[child.getName()]);
- child.saySomeThing();
4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
5.采用混合模式实现继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- Parent.prototype.sayParent=function()
- {
- alert("this is parentmethod!!!");
- }
- function Child(firstname)
- {
- Parent.call(this);
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
- child.sayParent();
js怎样实现继承的更多相关文章
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js模拟实现继承功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- js怎么实现继承?
3. js怎么实现继承? 1. 使用原型prototype 这个问题其实之前总结过了……但是面试时候有点忘……主要思想是记得的,但是不会写,还是基础太不牢靠,写的太少了.一开始因为不知道怎么能继承父类 ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
随机推荐
- 洛谷3384&bzoj1036树链剖分
值得注意的是: 一个点的子树是存在一起的...也就是说我们修改子树的时候只用... /********************************************************* ...
- bzoj1208Splay
Splay查前驱后继 小tips:在bzoj上while(scanf)这种东西可以让程序多组数据一起跑 反正没加我就t了 #include<cstdio> #include<iost ...
- hdu 5269 ZYB loves Xor I 分治 || Trie
题目大意: 长度为\(n\)的数组A.求对于所有数对\((i,j)(i \in [1,n],j \in [1,n])\),\(lowbit(A_i xor A_j)\)之和.答案对998244353取 ...
- POJ2559:Largest Rectangle in a Histogram
浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:http://poj.org/problem?id=2559 贪心的想,最大的子矩阵顶部 ...
- 51nod 1486 大大走格子——容斥
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1486 已知起点到某个障碍点左上角的所有点的不经过障碍的方案数,枚举 ...
- bzoj 1101 Zap —— 莫比乌斯反演
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1101 直接莫比乌斯反演. 代码如下: #include<cstdio> #inc ...
- Java中的String数据类型
本文主要是说明一些String数据类型的基本知识,有些杂乱,不过都是比较重要的东西,主要是参考了网上人的资料.原文网址:http://dev.yesky.com/91/2309091.shtml 主要 ...
- a标签中href="javacript:;" href="javacript:void(0);" href="#"区别
在使用<a>标签时,经常会绑定其他事件比如onclick,这时候我们会给<a>标签的href属性赋值为“#”,“javacript:;”,“javacript:void(0); ...
- 关于 vs 2012 键盘无法输入的问题
使用vs2012 新建了一个类文件之后,vs2012的编辑界面突然出现奇怪的问题,键盘无法输入! 最后调查的结果是由于resharper插件导致的. 可以将插件禁用然后启用. 也可以删除resharp ...
- project online get approvals task data 获取审批待办任务接口
调用接口地址:重要 http://xxxx/sites/pwa/_vti_bin/PSI/ProjectServer.svc Header 三个必要参数: 其中SOAPAction写死就行,如果是on ...