《JavaScript高级程序设计》第6章 面向对象程序设计
6.1 对象属性
6.1.1 属性类型
1. 数据属性
我们一般所说的属性就是数据属性,它用来将一个字符串名称映射到某个值上
数据属性的4个特性: configurable, enumerable, writable, value
要修改属性默认的特性,必须使用Object.defineProperty()方法
Object.defineProperty(对象,属性名,描述符对象)
var person = {};
Object.defineProperty(person, 'name', {
writable: false,
value: 'natsu'
});
console.log(person.name);
person.name = 'natsu12';
console.log(person.name); // 非严格模式下被忽略,严格模式下抛出错误
把configurable设置为false后,不能再修改除writable之外的特性
var person = {};
Object.defineProperty(person, 'name', {
configurable: false
});
Object.defineProperty(person, 'name', { // 抛出错误
configurable: true
});
2. 访问器属性
访问器属性不能直接定义,必须使用Object.defineProperty来定义,定义了get和set特性的属性即成为访问器属性。
在读取访问器属性的时候会调用getter函数,在写入访问器属性的时候会调用setter函数并传入新值。
访问器属性的4个特性: configurable, enumerable, get, set
只指定get函数意味着属性只能读不能写
/* 以下实例当修改访问器属性year时会导致数据属性_year和edition的变化 */
var book = {
_year: 2014,
edtion: 1
}; Object.defineProperty(book, 'year', {
get: function() {
return this._year;
},
set: function(newValue) {
if (newValue > 2014) {
this._year = newValue;
this.edtion = newValue - 2013;
}
}
}); console.log(book.year); // 读year的时候调用get函数,2014
book.year = 2015; // 写year的时候调用set函数
console.log(book.edtion); //
6.2 创建对象
6.2.1 工厂模式
这种模式抽象了创建具体对象的过程,虽然解决了创建多个相似对象的问题,却没有解决对象识别的问题(即怎样知道一个对象的类型)。
function createPerson (name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
console.log(this.name);
};
return o;
}
var person1 = createPerson('Nicholas', 29, 'Software Engineer');
person1.sayName(); // Nicholas
6.2.2 构造函数模式
要创建Person的新实例,必须使用new操作符,这种调用构造函数方式实际上经历以下四个步骤:
1.创建一个新对象;
2.将构造函数的作用域赋给新对象(因此this指向这个新对象)
3.执行构造函数中的代码(为这个新对象添加属性)
4.返回新对象
function Person (name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
console.log(this.name);
};
}
var person1 = new Person('Nicholas', 29, 'Software Engineer');
var person2 = new Person('Greg', 27, 'Doctor');
/* 创造的对象都有一个constructor属性,指向构造函数 */
console.log(person1.constructor == Person); // true
/* 创建的对象既是Person的实例,也是Object的实例,因为所有对象均继承自Object */
console.log(person1 instanceof Person); // true
console.log(person1 instanceof Object); // true
创建自定义的构造函数意味这将来可以将它的实例标识为一种特定类型,而这正是构造函数模式胜过工厂模式的地方(工厂模式无法知道对象的类型)。
构造函数的的多重身份
构造函数也是函数,通过new操作符来调用,它就可以作为构造函数,如果不通过new来调用,则跟普通函数没有区别。
// 当作构造函数使用
var person = new Person('Nicholas', 29, 'Software Engineer');
person.sayName(); // "Nicholas"
// 当作普通函数使用
Person('Greg', 27, 'Doctor'); // 严格模式下会报错,非严格模式下this绑定到window对象
window.sayName(); // "Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, 'Kristen', 25, 'Nurse');
o.sayName(); // "Kistten"
构造函数模式的问题
构造函数模式的每个方法都要在每个实例上重新创建一遍,然而创建两个完成同样任务的函数实例是没有必要的(浪费空间)。
console.log(person1.sayName == person2.sayName); // false
// 说明不同实例上的同名函数是不相等的,但它们是完成同样任务的函数
6.2.3 原型模式
通过原型模式创建的实例,会共享原型对象中的所有属性和方法。
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
console.log(this.name);
};
var person1 = new Person();
var person2 = new Person();
console.log(person1.sayName == person2.sayName); // true
只要创建了一个新函数,就会为该函数自动增加一个prototype属性,指向该函数的原型对象。
该原型对象拥有一个constructor属性,反指回这个新函数,初始时原型对象只取得constructor属性,其他方法从Object继承而来。
调用构造函数创建一个新实例后,会为该实例自动增加一个__proto__属性,指向构造函数的原型对象。
上面的例子中,两个person实例都不包含属性和方法,却可以调用sayName,是通过原型对象查找对象属性来实现的。
在读取某个对象的属性时,首先从对象实例本身开始搜索,然后继续搜索__proto__指向的原型对象。
如果我们在实例中添加一个同名属性,则该属性会屏蔽原型中的那个属性。
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
console.log(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
person1.sayName(); // "Greg"——来自实例
person2.sayName(); // "Nicholas"——来自原型
使用hasOwnProperty()方法可以判断属性是不是实例属性,如果属性是对象自身的实例属性则返回true,如果是来自原型对象则返回false。
// 接上面的例子
console.log(person1.hasOwnProperty("name")); // true
console.log(person2.hasOwnProperty("name")); // false
delete person1.name;
person1.sayName(); // "Nicholas"——来自原型
console.log(person1.hasOwnProperty("name")); // false
in操作符(propertyName in object):只要通过对象能够访问到某个属性就返回true,无论是直接在对向上访问到的,还是通过原型访问到的。
for in:可以遍历所有通过对象访问的(包括实例和原型)、可枚举的属性。
原型的动态性:
可以随时为原型添加属性和方法,对原型对象所做的任何修改都能够立即从实例上反映出来。
请注意,重写原型对象会导致切断现有原型与之前任何已经存在的对象实例之间的联系。

原型对象的问题:当包含引用类型值的属性时,所有实例都被迫共享。
例如某个属性friends是数组,当调用person1.friends.push增加一个元素时,person2.friends也会跟着修改。
6.2.4 组合使用构造函数模式和原型模式
最常见的方式,构造函数模式用于定义实例属性(每个实例自己独有,不共享),而原型模式用于定义方法和共享的属性。
6.2.5 动态原型模式
将所有信息都封装在了构造函数中,在构造函数中初始化原型。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof this.sayName != "functin") {
// 在sayName方法不存在的情况下,才将它添加到原型中
Person.prototype.sayName = function () {
console.log(this.name);
}
}
}
上面的代码中,给原型添加sayName方法只有在初次调用构造函数时才会执行。
《JavaScript高级程序设计》第6章 面向对象程序设计的更多相关文章
- JavaScript高级程序设计 第六章 面向对象程序设计
面向对象程序设计 ECMA-262将对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性和方法都有一个名字,而每个名字都 ...
- 零基础学Python--------第7章 面向对象程序设计
第7章 面向对象程序设计 7.1 面向对象概述 面向对象(Object Oriented)的英文缩写是OO,它是一种设计思想.从20世纪60年代提出面向对象的概念到现在,它已经发展成为一种比较成熟的编 ...
- 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验二 面向对象程序设计 实验报告
20175316 盛茂淞 2018-2019-2 <Java程序设计>实验二 面向对象程序设计 实验报告 (一)单元测试 在 IDEA中我们把产品代码放在src目录中,把测试代码放在tes ...
- 20165222《Java程序设计》——实验二 面向对象程序设计
20165222<Java程序设计>——实验二 面向对象程序设计 提交点一.JUnit测试用例 知识点:这里就是了解测试代码的应用,测试代码的书写为:@Test assertEquals( ...
- C++ Primer 5th 第15章 面向对象程序设计
面向对象程序设计的核心思想是:数据抽象.继承和动态绑定. 数据抽象:将类的接口与实现分离: 继承:定义相似类型并对相似关系建模: 动态绑定:一定程度上上忽略相似类型间的区别,用同一方式使用它们. 1. ...
- [C++ Primer] : 第15章: 面向对象程序设计
OOP: 概述 面向对象程序设计的核心思想是数据抽象, 继承和动态绑定. 通过数据抽象, 我们可以实现类的接口与实现的分离; 使用继承, 可以定义相似的类型并对其相似关系建模; 使用动态绑定, 可以在 ...
- 【c++ Prime 学习笔记】第15章 面向对象程序设计
15.1 OOP:概述 面向对象程序设计(object-oriented programming)的核心思想是:数据抽象.继承.动态绑定 使用数据抽象,可将类的接口与实现分离 使用继承,可定义相似的类 ...
- Java程序设计 实验二 Java面向对象程序设计
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1353 姓名:李海空 学号:20135329 成绩: 指导教师:娄嘉鹏 ...
- JavaScript高级程序设计学习笔记第六章--面向对象程序设计
1.ECMAScript没有类的概念,ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”,有点类似于散列表 2.ECMAScript 中有两种属性:数据属性和访问 ...
- JavaScript高级程序设计-第六章面向对象的程序设计
创建对象主要的两种形式,创建Object实例和创建对象字面量 对象包含属性和方法 数据 .属性有四个特性,特性是为了描述属性行为的,他们是: Configurable(可配置的)是否能删除或是否能修改 ...
随机推荐
- 图片轮播jQuery
<script type="text/javascript"> //图片轮播 var bannerIndex = 0; ba ...
- Objective-C数据类型、数据类型转换
数据类型 1.Objective-C数据类型可以分为:基本数据类型.对象数据类型和id类型. 2.基本数据类型有:int.float.double和char类型. 3.对象类型就是类或协议所声明的指针 ...
- jQuery身份证验证插件
jQuery身份证验证插件 /*! * jQuery isIDCard Plugin v1.0.0 * http://www.cnblogs.com/cssfirefly/p/5629561.html ...
- mariadb一些命令介绍及mariadb架构图和索引
mariadb> SHOW GLOBAL VARIABLES; 全局变量影响服务器的全局操作 mariadb> SHOW [SESSION] VARIABLES; 客户端变量,只对当前会话 ...
- PHP,Mysql-根据一个给定经纬度的点,进行附近地点查询–合理利用算法,效率提高2125倍
目前的工作是需要对用户的一些数据进行分析,每个用户都有若干条记录,每条记录中有用户的一个位置,是用经度和纬度表示的.还有一个给定的数据库,存储的是一些已知地点以及他们的经纬度,内有43W多条的数据.现 ...
- LtUpload上传组件
<?php/** * The Upload class * @author Alex Lee <iuyes@qq.com> * @license http://opensource. ...
- 在Activity中设置new出来的TextView属性
//创建一个TextView---->textView TextView textView = new TextView(this); // 第一个参数为宽的设置,第二个参数为高的设置 te ...
- Wordpress模板标签大全
Wordpress模板基本文件 style.css 样式表文件 index.php 主页文件 single.php 日志单页文件 page.php 页面文件 archvie.php 分类和日期存档页文 ...
- [重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分
原文出处:[重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分 http://www.dotblogs.com.tw/mis2000lab/archive/2015/ ...
- (转)python文件操作 seek(),tell()
seek():移动文件读取指针到指定位置 tell():返回文件读取指针的位置 seek()的三种模式: (1)f.seek(p,0) 移动当文件第p个字节处,绝对位置 (2)f.seek(p,1) ...