读Secrets of the JavaScript Ninja(二)对象
面向对象和原型
理解原型
在JavaScript中,可通过原型实现继承。原型的概念很简单。每个对象都含有原型的引用,当查找属性时,若对象本身不具有该属性,则会查找原型上是否有该属性。
每个对象都可以有一个原型,每个对象的原型也可以拥有一个原型,以此类推,形成一个原型链。查找特定属性将会被委托在整个原型链上,只有当没有更多的原型可以进行查找时,才会停止查找。
对象构造器与原型
当用作为函数调用Ninja时,什么都不会做。在用new操作符时返回一个对象,并且设置了它的原型为Ninja,所以ninja2可以调用swingSword方法。但swingSword方法是Ninja的原型属性, 而不是ninja实例的属性
function Ninja(){}
Ninja.prototype.swingSword = function(){
return true;
};
const ninja1 = Ninja();
assert(ninja1 === undefined,
"No instance of Ninja created.");
const ninja2 = new Ninja();
assert(ninja2 &&
ninja2.swingSword &&
ninja2.swingSword(),
"Instance exists and method is callable." );
实例属性
- 当在原型和实例中有重名属性时,实例属性优先级比原型属性高
- 创建了多个实例,每个实例都是独立的拷贝,但是原型引用的是同一个方法
function Ninja(){
this.swung = false;
this.swingSword = function(){
return !this.swung;
};
}
Ninja.prototype.swingSword = function(){
return this.swung;
};
const ninja = new Ninja();
assert(ninja.swingSword(),
"Called the instance method, not the prototype method.");
通过构造函数实现对象类型
constructor
通过constructor属性来检查类型
assert(ninja.constructor === Ninja, constructor引用检测ninja的类型,得到的结果为其构造函数的引用
使用constructor的引用创建新对象
const ninja2 = new ninja.constructor(); ⇽--- 通过第1个实例化对象的constructor方法创建第2个实例化对象
实现继承
为了实现继承,将Person的实例作为Ninja的原型,所以当Niaja药调用person的方法时,将会沿着原型链进行查找。
function Person(){}
Person.prototype.dance = function(){};
function Ninja(){}
Ninja.prototype = new Person(); ⇽--- 通过将Ninja的原型赋值为Person的实例,实现Ninja继承Person
const ninja = new Ninja();
assert(ninja instanceof Ninja,
"ninja receives functionality from the Ninja prototype");
assert(ninja instanceof Person, "... and the Person prototype");
assert(ninja instanceof Object, "... and the Object prototype");
assert(typeof ninja.dance === "function", "... and can dance!")
重写constructor属性的问题
通过设置Person实例对象作为
Ninja构造器的原型时, 我们已经丢失了Ninja与Ninja初始原型之间的关联。
//通过defineProperty配置constructor对象
function Person(){}
Person.prototype.dance = function(){};
function Ninja(){}
Ninja.prototype = new Person();
Object.defineProperty(Ninja.prototype,"constructor",{
enumerable: false,
value: Ninja,
writable: true
}
);
在ES6使用JavaScript的class
ES6中使用关键字class来实现类,但其底层的实现仍然是基于原型继承!
使用class关键字
class Ninja{
constructor(name){
this.name = name;
}s
wingSword(){
return true;
}
//静态方法
static compare(ninja1, ninja2){
return ninja1.level - ninja2.level;
}
}
实现继承
class Person {
constructor(name){
this.name = name;
}
dance(){
return true;
}
}
class Ninja extends Person
constructor(name, weapon){
super(name); ⇽--- 使用关键字super调用基类构造函数
this.weapon = weapon;
}
wieldWeapon(){
return true;
}
}
控制对象的访问
使用getter与setter控制属性访问
//使用字面量get set
const ninjaCollection = {
ninjas: ["Yoshi", "Kuma", "Hattori"],
get firstNinja(){
report("Getting firstNinja");
return this.ninjas[0];
}, ⇽--- 定义firstNinja的getter方法, 返回ninjas列表中第一个值, 并记录一条
消息
set firstNinja(value){
report("Setting firstNinja");
this.ninjas[0] = value;
} ⇽--- 定义firstNinja的setter方法, 设置ninjas列表中第一个值, 并记录一条
消息
};
//ES6 class
class NinjaCollection {
constructor(){
this.ninjas = ["Yoshi", "Kuma", "Hattori"];
}
get firstNinja(){
report("Getting firstNinja");
return this.ninjas[0];
}
set firstNinja(value){
report("Setting firstNinja");
this.ninjas[0] = value;
} ⇽--- 在ES6的class中使用getter和setter
}
const ninjaCollection = new NinjaCollection();
使用getter与setter校验属性值
function Ninja() {
let _skillLevel = 0;
Object.defineProperty(this, 'skillLevel', {
get: () => _skillLevel,
set: value => {
if(!Number.isInteger(value)){
throw new TypeError("Skill level should be a number");
} ⇽--- 校验传入的值是否是整型。 如果不是, 则抛出异常
_skillLevel = value;
}
});
}
const ninja = new Ninja();
使用代理控制访问
可以将代理理解为通用化的setter与getter,区别是每个setter与getter仅能控制单个对象属性, 而代理可用于对象交互的通用处理,包括调用对象的方法
通过Proxy构造器创建代理
const emperor = { name: "Komei" };
const representative = new Proxy(emperor, {
get: (target, key) => {
report("Reading " + key + " through a proxy");
return key in target ? target[key]
: "Don't bother the emperor!"
},
set: (target, key, value) => {
report("Writing " + key + " through a proxy");
target[key] = value;
}
});
使用代理记录日志
function makeLoggable(target){
return new Proxy(target, {
get: (target, property) => {
report("Reading " + property);
return target[property];},
set: (target, property, value) => {
report("Writing value " + value + " to " + =property);
target[property] = value;
}
});
}
let ninja = { name: "Yoshi"};
ninja = makeLoggable(ninja);
assert(ninja.name === "Yoshi", "Our ninja Yoshi");
ninja.weapon = "sword"; ⇽--- 对代理对象进行读写操作时, 均会通过代理方法记录日志
使用代理可以优雅地实现以下内容。
- 日志记录。
- 性能测量。
- 数据校验。
- 自动填充对象属性(以此避免讨厌的null异常) 。
- 数组负索引。
读Secrets of the JavaScript Ninja(二)对象的更多相关文章
- 读Secrets of the JavaScript Ninja(一)函数
理解JavaScript为什么应该作为函数式 在JavaScript中,函数是程序执行过程中的主要模块单元 函数是第一类对象 通过字面量创建 function ninjaFunction(){} 赋值 ...
- [在读]Secrets of the javascript Ninja
很棒的一本,可惜没有中文版.
- 《Secrets of the JavaScript Ninja》:JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
- 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象
一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象
1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...
- 2、JavaScript 基础二 (从零学习JavaScript)
11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...
- JavaScript三(对象思想)
JavaScript并不是面向对象的程序设计语言,但它是基于对象的.JavaScript中的每个函数都可用于创建对象,返回的对象既是该对象的实例,也是object的实例 . 一.对象与关联数组 Jav ...
- 学习javascript数据结构(二)——链表
前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
随机推荐
- HDU6701:Make Rounddog Happy(启发式分治)
题意:给定数组a[],求区间个数,满足区间的数各不同,而且满足maxval-len<=K: 思路:一看就可以分治做,对于当前的区间,从max位置分治. 对于这一层,需要高效的统计答案,那么对短的 ...
- MATLAB画图笔记
plot函数 plot(x,y)默认格式: 若x,y是向量,则它们必须具有相同的长度.函数将以x为横轴,绘制y. 若x,y都是矩阵,则它们必须具有相同的尺寸,plot函数将针对x的各列绘制y的每列.更 ...
- 如何使用Microsoft的驱动程序验证程序解释无法分析的崩溃转储文件
这篇文章解释了如何使用驱动程序验证工具来分析崩溃转储文件. 使用Microsoft驱动程序验证工具 如果您曾经使用Windows的调试工具来分析崩溃转储,那么毫无疑问,您已经使用WinDbg打开了一个 ...
- three.js 加载3DS 404 文件找不到
web.config修改如下: code: <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配 ...
- ACM之Java输入输出
本文转自:ACM之Java输入输出 一.Java之ACM注意点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错 ...
- A♂G&C012
A♂G&C012 A AtCoder Group Contest 从大到小sort后输出\(a_2+a_4+a_6+\ldots a_{2n}\) 好♂啊,只会背结论/kk B Splatte ...
- nginx 反向代理之 proxy_set_header
proxy_set_header用来设定被代理服务器接收到的header信息. 语法:proxy_set_header field value; field :为要更改的项目,也可以理解为变量的名字, ...
- pycharm配置默认代码和注释模板
有人问,在pycharm新建python文件时,文件开头的注释每次都要重复写,能不能配置成模板?其实pycharm本身自带此功能 在pycharm菜单栏找File -> settings -&g ...
- java集合代码示例
一.List ArrayList 使用List时,最好初始化容量. ArrayList的默认容量为10,每次扩容增0.5倍,假如要放置100个元素,需要多次扩容. List<String> ...
- C++内联函数(C++ inline)详解
使用函数能够避免将相同代码重写多次的麻烦,还能减少可执行程序的体积,但也会带来程序运行时间上的开销. 函数调用在执行时,首先要在栈中为形参和局部变量分配存储空间,然后还要将实参的值复制给形参,接下来还 ...