JavaScript的封装和继承
提到JavaScript“面向对象编程”,主要就是封装和继承,这里主要依据阮一峰及其他博客的系列文章做个总结。
继承机制的设计思想
所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。
由于所有的实例对象共享同一个
prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像”继承”了prototype对象一样。
封装
主要介绍了如何”封装”数据和方法,以及如何从原型对象生成实例。
(1) 封装:把属性和方法封装成一个对象。
(2)如何根据某一规格(原型)生成对象:构造函数。相较于原始方法(用字面量一个一个手动生成对象),其优点在于:
减少代码重复,将对象普遍具有的属性先用构造函数定义好,使用构造函数生成对象时传参即可为产生的对象的属性赋值;
体现生成的对象与原型对象之间的联系。
构造函数具有的
prototype属性的优点:将所有对象具有的值相同的属性,挂在prototype上,无论生成多少个对象,它们都共用这一份prototype,在内存中只有一份,减少不必要的资源浪费。isPrototypeOf,hasOwnProperty()检测是本地属性还是原型属性,in遍历对象的所有属性,包括原型属性。
【注意】:构造函数中的属性是本地属性,每个对象都维护各自的值,prototype中的属性是引用属性,所有对象共有一份。原型属性与实例属性同名时,原型属性会被实例属性覆盖
构造函数的继承 (五种方法)
方法一:构造函数绑定
在子对象构造函数Cat()中加一行:
|
|
优点:可以实现多继承(call/apply多个对象);并且,创建子类实例时,可以向父类传递参数。
缺点:只能继承父类的实例属性和方法,不能继承父类的原型属性/方法。(这里引申出【组合继承】:在本方法基础上,加上方法二的原型继承,即call+prototype方法,组合继承既可以继承原型属性/方法,又可以继承实例属性/方法,而且还可传参)。
方法二:prototype模式(又称原型链继承,注意需要对constructor修正)
将父类的实例作为子类的原型:如果”猫”的prototype对象,指向一个Animal的实例,那么所有”猫”的实例,就能继承Animal了。
|
|
【注意】:
任何一个
prototype对象(cat.prototype)都有一个constructor属性,指向它的构造函数。更重要的是,每一个实例(
cat1)也有一个constructor属性,默认调用prototype对象的constructor属性。
=>
【普适性的规则】:如果替换了prototype对象,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数:
|
|
缺点:无法实现多继承;创建子类实例时,无法向父类构造函数传参。
方法三:直接继承prototype
优点是 效率比较高(不用执行和建立Animal的实例了),比较省内存。
缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
|
|
方法四:利用空对象作为中介 (又称寄生组合继承,对方法三的改良):完美
|
|
方法五:拷贝继承:把Parent.prototype的所有属性和方法,拷贝进Child.prototype
|
|
拷贝继承支持多继承。
非构造函数的继承
继承某个具体的对象。
方法一:object()(实质上还是原型继承)
|
|
方法二:浅拷贝(只能拷贝数据全是基本类型的对象)
存在问题:如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
方法三:深拷贝
递归调用浅拷贝
|
|
优点:支持多继承。
缺点:效率较低,内存占用高(因为要拷贝父类的属性);无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)。
JavaScript的封装和继承的更多相关文章
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- Javascript面向对象特性实现封装、继承、接口详细案例
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象编程,带你认识封装、继承和多态
原文链接:点我 周末的时候深入的了解了下javascript的面向对象编程思想,收获颇丰,感觉对面向对象编程有了那么一丢丢的了解了~很开森 什么是面向对象编程 先上一张图,可以对面向对象有一个大致的了 ...
- 浅谈JavaScript的面向对象和它的封装、继承、多态
写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...
- Jser 设计模式系列之面向对象 - 接口封装与继承
GOF在<设计模式>中说到:面向接口编程,而非面向实现编程 鉴于此,这个概念可见一斑! JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一 ...
- 深入浅出JS的封装与继承
JS虽然是一个面向对象的语言,但是不是典型的面向对象语言.Java/C++的面向对象是object - class的关系,而JS是object - object的关系,中间通过原型prototype连 ...
- JavaScript对寄生组合式继承的理解
有关JavaScript的几种继承方式请移步JavaScript的几种继承方式 原型链的缺陷 SubType.prototype = new SuperType(); 这样做的话,SuperType构 ...
随机推荐
- 图之强连通--Tarjan算法
强连通分量 简介 在阅读下列内容之前,请务必了解图论基础部分. 强连通的定义是:有向图 G 强连通是指,G 中任意两个结点连通. 强连通分量(Strongly Connected Components ...
- G. Minimum Possible LCM
https://codeforces.com/contest/1154/problem/G #include<bits/stdc++.h> using namespace std; typ ...
- 计算文本长度-boundingRectWithSize
- (void)viewDidLoad { [super viewDidLoad]; //新建lable控件 UILabel *lable=[[UILabel alloc]init]; labl ...
- Complier
Complier [2019福建省赛] 模拟题应该有信心写,多出一些样例 当/* 与// 在一起的时候总会出错,一旦出现了这些有效的 应该把它删掉不对后面产生影响 #include<bits/s ...
- 迅为iTop开发板使用buildroot构建opencv文件系统
这次我们来介绍使用buildroot构建opencv开发环境,buildroot 是 Linux平台上一个构建嵌入式Linux系统的框架.整个buildroot是由 Makefile脚本和Kconfi ...
- 3)利用Build.php自动创建目录和文件
(1)首先做法参照: thinkphp5的手册的 命令行--->自动生成目录结构 或者看云的资料:https://www.kancloud.cn/manual/thinkphp5/118021 ...
- laravel中用到的ServiceProvide
路由 全局限制 如果你希望路由参数可以总是遵循正则表达式,则可以使用 pattern 方法.你应该在 RouteServiceProvider 的 boot 方法里定义这些模式: 1 2 3 4 5 ...
- FastDFS安装部署
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 服务器信息: Storage:192.168.247.20 Traker:192.168.247.21 一.搭建环境准备 ...
- Jump Game (Medium)
主要有两种思路: 一. 本题只需要判断能否到达最后一个数,那么可以采用贪心策略,到达某个位置i后,在直接在这个位置的基础上走nums[i]步,主要保证能一直前进,就能达到终点: 那么,什么时候才不能一 ...
- HTTP-web服务器接收到client请求后的处理过程(很详细)
1. 客户发起情况到服务器网卡: 2. 服务器网卡接受到请求后转交给内核处理: 3. 内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程 4. Web服务器进程根据用户请求,向内核进 ...