js高级程序设计 笔记 --- 面向对象的程序设计
1,理解对象
通过对象字面量的方式,创建一个对象,为它添加属性和方法:
var obj = { a: 1, b:2, sayA(){ console.log(this.a)}}
1,属性类型:
数据属性 :
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。有四个特性
configurable enumerable writable value : 分为的意思为:是否能通过delete删除(能否修改特性)、是否能通过for-in循环、是否能修改属性的值、包含这个属性的值
通过对象字面量创建的对象,这四个特性都为true
要修改属性的特性,必须使用Object.defineProperty()方法,这个方法接收三个参数,对象,属性名和 特性名称。
访问器属性:
访问器属性不包含数据值,它们包含一对getter和setter函数,在读取访问器属性时,会调用getter,此函数会返回有效的值;在写入访问器属性时,会调用setter并传入新值,这个函数负责处理数据
Configurable enumerable : 同数据属性
get: 读取属性时调用,
set: 写入属性时调用
在属性名的前面加_ 表示 只能通过对象的方法访问的属性。
定义多个属性:
Object.defineProperties () :
读取属性的特性:
Object.getOwnPropertyDescriptor () : 第一个参数为 指定的对象,第二个参数为要读取描述符的属性名;
2,创建对象
1,工厂模式
2,构造函数模式
要创建实例,必须使用new操作符。以这种方式调用构造函数会经历以下四个步骤: 1, 创建一个新对象; 2, 将构造函数的this指向新对象; 3,执行构造函数中的代码; 4, 返回新对象。
构造函数的问题是: 每个方法都要在每个实例上重新创建一遍,因为有this在,根本不用在执行代码前就把函数绑定到特定的对象上。
3,原型模式
每个函数都有一个prototype属性,这个指针指向该函数的原型对象。使用原型对象可以让所有实例共享它所包含的属性和方法
可以通过实例去访问保存在原型中的值,但不能通过对象实例重写原型中的值。 调用Object.hasOwnProperty()可以检查一个属性是存在实例中还是存在原型中。
for in循环的是所有能够通过对象访问的、可枚举的属性。既包含存在于实例的也包含存在于原型的属性。
Object.keys() : 获取对象自身所有的可枚举的属性值,不包括原型的属性,返回属性组成的数组。
Object.getOwnPropertyNames() : 获取对象自身的所有属性,包括不可枚举的,不包括原型的。 返回组成的数组。
原型对象的问题是: 所有属性都是被实例共享的,那么如果有一个引用类型的属性,如果一个实例修改了,那么所有实例的这个属性都会修改。
4,组合使用构造函数和原型对象
实例属性在构造函数中定义,方法在原型对象中定义。
5,动态原型模式
通过构造函数来初始化原型,通过判断 原型中没有,再添加。
6,寄生构造函数模式
在函数中new一个对象,将参数放入这个对象,返回这个对象。 这个对象和构造函数、构造函数的原型没有任何关系。
7,稳妥构造函数模式
适合在安全的环境,不使用this,不使用new,返回一个对象,只能通过对外的接口来访问其中的原始数据成员。 这个对象和构造函数
3,继承
1,原型链
function Person(){}
function Men () {}
Men.prototype = new Person()
Men.prototype.constructor = Men
Men的实例查找一个属性的时候,会先在实例上查找,如果没有的话,就在实例的原型,也就是Men.prototype上查找,如果没有,则会继续沿着原型链向上,在Person的prototype上查找,如果没有,则继续向上,在Object.prototype上查找。
确定原型和实例的关系
1,使用instanceof : 只要实例与原型链中出现过的构造函数,都会返回true
2,使用 isPrototypeOf() : 只要是原型链中出现过的原型,都会返回true
谨慎的定义方法
使用原型链继承方法的时候,不能使用对象字面量创建原型方法,因为这样会重写原型链。
原型链的问题
因为在通过原型继承的时候,原型会变成另一个类型的实例,那么,原先的实例属性就变成了现在的原型属性了。 如果修改的话,会影响所有实例。
2,借用构造函数
子类的构造函数中, 使用 父类构造函数.call(this, ...args),此方法可以在子类构造函数中向超类构造函数传递参数。
这种方法的问题是: 超类的原型 对子类来说是不可见的。
3,组合继承
将原型链和借用构造函数的技术组合。
function Person (name) { this.name = name}
Person.prototype.sayName = function (){ console.log(this.name) }
function Men (name) { Person.call(this, name) }
Men.prototype = new Person()
Men.prototype.constructor = Men
4,原型式继承
function Person(o) { function F(){}; F.prototype = o; return new F() }
es5通过Object.create() 模拟了原型式继承。只是想让一个对象与另一个对象保持类似的话,这种方法时完全可以的。
注意:包含的引用类型的属性 始终都会共享相应的值。
5,寄生式继承
通过Object.create(obj)来创建一个传入参数obj的模板,然后在这个模板上加新方法,返回这个模板对象。
6,寄生组合式继承
在组合继承的时候,会调用两次超类的构造函数, 在给子类的原型赋值 给 超类的实例对象时,这一步完全可以换成 Object.create(超类原型),这样就只用调用一次超类的构造函数了。
小结: es支持面向对象编程。对象在代码执行过程中创建和曾强,所以具有动态性而非严格定义的实体。可以采用以下的模式创建对象:
1,工厂模式 2,构造函数模式 3,原型模式
js主要是通过原型链进行继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。这样子类型就能访问超类型的所有属性和方法。
js高级程序设计 笔记 --- 面向对象的程序设计的更多相关文章
- JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承
相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...
- javascript高级程序设计读书笔记----面向对象的程序设计
创建对象 工厂模式 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = ...
- JS高程3:面向对象的程序设计——理解对象
JS中对象的定义: (无序)属性的集合 (无序)值的集合 (无序)名值对的集合 JS对象是基于引用数据类型来创建的. JS对象创建的2种方式: 传统方式 对象字面量 var person = new ...
- JS高级学习路线——面向对象进阶
构造函数进阶 使用构造函数创建对象 用于创建对象 其除了是一个函数之外,我们又称之为构造对象的函数 - 简称构造函数 function Product(name,description){ //属性 ...
- 转:JS高级学习笔记(8)- JavaScript执行上下文和执行栈
必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...
- JS高级学习笔记(6)- 事件循环
参考文章:深入理解JS引擎的执行机制 JavaScript 异步.栈.事件循环.任务队列 我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...
- Js高级 部分内容 面向对象
1.单列模式 2.工厂模式 3.构造函数 (1)类 js天生自带的类 Object基类 Function Array String Number Math Date Boolean Regex ...
- JS高级学习笔记(1)- 数据类型及转换规则
必读: Javascript对象Oject的强制类型转换 JavaScript筑基篇(二)->JavaScript数据类型 聊一聊valueOf和toString 深入理解JavaScript系 ...
- JS高级学习笔记(9) 之 转:前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
随机推荐
- 福大软工 · BETA 版冲刺前准备(团队) [已完成]
写在前面 本次作业地址 林燊大哥 过去存在的问题 算法组 没有考虑到数据集不充足的情况.一开始我们将所有数据集按照8:1:1进行分割,分别分配给训练集.开发集和测试集.然鹅后来发现采集到的数据不够充足 ...
- myisam innodb memory 区别(2)
1.区别:1) MyISAM管理非事务表.提供高速存储和检索,以及全文搜索能力.MyISAM在所有MySQL配置里被支持,是默认的存储引擎,除非配置MySQL默认使用另外一个引擎.2)MEMORY存储 ...
- UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 12: ordinal not in range(128)问题解决
今天在验证字符串是否包含的时候报错:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 12: ordinal n ...
- [GO]简单的并发服务器
package main import ( "net" "fmt" "strings" ) func HandleConn(conn net ...
- mybaits foreach
<select id="selectQuickConsultDoctorList" resultMap="BaseResultMap" parameter ...
- NetBeans找不到C/C++编译器
如果您已经安装 NetBeans IDE 6.9,但其中不包括 C/C++ 插件 如果在选择“文件”>“新建项目”时,NetBeans IDE 未显示 "C/C++" 项目类 ...
- 11、Semantic-UI之分割线
11.1 分割线的定义 示例:定义分割线 分割线 <div class="ui divider"></div> 竖线并加入or <div class= ...
- CentOS 7安装GitLab、汉化、配置邮件发送
1.更换国内yum源 1.1 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 1.2 ...
- Web开发入门经典:使用PHP6、Apache和MySQL 中文pdf扫描版
通过学习本书,读者很快就能明白为什么PHP.Apache和MySQL会迅速成为开发动态网站最流行的方式,本书将为读者理解这3个核心组件如何独立工作和协同工作奠定良好的基础,引导读者充分利用它们提供的各 ...
- uwsgi启动Django项目时:unable to load app 0 (mountpoint='') (callable not found or import error) *** no app loaded. going in full dynamic mode ***
说起来有点坑 用命令都能正常启动,但是用配置文件就是不行 提示 unable to load app (mountpoint='') (callable not found or import err ...