之前有篇博客曾提到过一点js的面向对象编程:js面向对象编程.

这里就结合js高程详细剖析一下javascript的面向对象编程.

前序:

1⃣️Object.defineProperty()

    var obj = {
_name:'jack'
};
Object.defineProperty(obj,'name',{
configurable:false,//表示能否通过delete删除属性从而重新定义属性,默认值true
value:'orange',//属性的数据值,默认值undefined
writable:false,//表示能否修改属性的值,默认值为true
enumerable:false,//是否可枚举,能否通过for-in循环返回属性,默认值为true
get:function(){//getter
return this._name;
},
set:function(newval){//setter
this._name = newval;
}
})

vue2.x版本的双向数据绑定就是基于该API和订阅/发布模式实现的;

如果同时定义多个属性,可通过如下API:

Object.defineProperties(book, {
_year: {
value:
},
edition: {
value:
},
year: {
get: function(){
return this._year;
},
set: function(newValue){
if (newValue > ) {
this._year = newValue;
this.edition += newValue - ;
}
}
}
});

2⃣️读取属性的特性Object.getOwnPropertyDescriptor() 

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //
alert(descriptor.configurable); //false

正文:

3⃣️创建对象

3.1 工厂模式

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", , "Software Engineer");
var person2 = createPerson("Greg", , "Doctor");

工厂模式创建了n个互不关联的对象,但是却没有解决对象识别的问题(即怎样知道一个对象的类型) .

3.2 构造函数模式

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}; }
var person1 = new Person("Nicholas", , "Software Engineer");
var person2 = new Person("Greg", , "Doctor");

因为函数也是一个对象,所以可以通过该方式创建一个Person对象;

按照惯例,构造函数始终都应该以一个 大写字母开头,而非构造函数则应该以一个小写字母开头 ;

要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤:

(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
(3) 执行构造函数中的代码(为这个新对象添加属性);
(4) 返回新对象。

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
alert(person1 instanceof Object);  //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true

构造函数模式虽然好用,但也并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍,不能共享。虽然我们可以将该方法写到全局作用域,然后在构造函数内部调用,但是这种做法显然耦合度过高.

3.3 原型模式

可以顺便参照之前的博客:js继承的实现.

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = ;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

可以看到,原型属性上的属性值和属性方法是被所有实例共享的.

3.3.1实例属性和原型属性

person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型 delete person1.name;
alert(person1.name); //"Nicholas"——来自原型

我们看到访问实例属性的时候,优先级是实例属性-->原型属性,删除属性的时候优先级也是如此;

实例上有该属性,就直接拿实例的该属性,没有的话就去原型上找.

3.3.2 hasOwnProperty() 判断属性是不是来自于实例

var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true

实例的原型属性不可枚举:

var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName" var p1 = new Person();
p1.name = "Rob";
p1.age = ;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

JavaScript高程第三版笔记-面向对象编程的更多相关文章

  1. JavaScript高程第三版笔记(1-5章)

    第2章:在html中使用javascript ①script标签的defer属性 <script type="text/javascript" defer="def ...

  2. JavaScript高程第三版笔记-DOM扩展

    在那个刀耕火种的年代,用过jQuery的都体会到了jQuery带来的便捷,尤其是元素选择器. jQuery(www.jquery.com)的核心就是通过 CSS 选择符查询 DOM 文档取得元素的引用 ...

  3. JavaScript高程第三版笔记-函数表达式

    1⃣️递归 阶乘函数: function factorial(num){ ){ ; } ); } } 改装一:(arguments.callee指向正在执行的函数的指针,实现解耦) function ...

  4. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  5. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  6. 《Effective C++》第三版笔记

    阅读此笔记前,请先阅读 <Effective C++>第二版笔记  和  <More Effective C++>笔记 这里只记录与上面笔记不同的条款,主要是 "面对 ...

  7. [Java入门笔记] 面向对象编程基础(一):类和对象

    什么是面向对象编程? 我们先来看看几个概念: 面向过程程序设计 面向过程,是根据事情发展的步骤,按进行的顺序过程划分,面向过程其实是最为实际的一种思考方式,可以说面向过程是一种基础的方法,它考虑的是实 ...

  8. python笔记 面向对象编程从入门到高级

    目录: 一.概念 二.方法    2.1组合 2.2继承 2.3多态 2.4封装 2.5归一化设计 三.面向对象高级   3.1   反射(自省) 3.2   内置方法__getatter__, __ ...

  9. 疯狂java讲义 第三版 笔记

      java7新加特性: 0B010101  二进制数 int c=0B0111_1111;   数值中使用下划线分隔 switch 支持String类型   字符串常量放在常量池 String s0 ...

随机推荐

  1. Python中关于txt的简单读写模式与操作

    Python中关于txt的简单读写操作 常用的集中读写模式: 1.r 打开只读文件,该文件必须存在. 2.r+ 打开可读写的文件,该文件必须存在. 3.w 打开只写文件,若文件存在则文件长度清为0,即 ...

  2. QT对话框

    QFileDialog:文件对话框 QString fileName=QFileDialog::getOpenFileName(this,"打开文件", "/" ...

  3. [易学易懂系列|rustlang语言|零基础|快速入门|(5)|生命周期Lifetime]

    [易学易懂系列|rustlang语言|零基础|快速入门|(5)] Lifetimes 我们继续谈谈生命周期(lifttime),我们还是拿代码来说话: fn main() { let mut a = ...

  4. 浅谈响应式Web设计与实现思路

    是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...

  5. 【三】材质反射属性模型BRDF

    双向反射分布函数(BRDF:Bidirecitonal Reflectance Distribution Function) 用来描述物体表面对光的反射性质 预备知识 BRDF的定义和性质 BRDF模 ...

  6. BZOJ 3173: [Tjoi2013]最长上升子序列 (线段树+BIT)

    先用线段树预处理出每个数最终的位置.然后用BIT维护最长上升子序列就行了. 用线段树O(nlogn)O(nlogn)O(nlogn)预处理就直接倒着做,每次删去对应位置的数.具体看代码 CODE #i ...

  7. 网络摘抄-深入浅出JVM调优

    基本概念: JVM把内存区分为堆区(heap).栈区(stack)和方法区(method).由于本文主要讲解JVM调优,因此我们可以简单的理解为,JVM中的堆区中存放的是实际的对象,是需要被GC的.其 ...

  8. python 通过序列索引迭代

    另外一种执行循环的遍历方式是通过索引,如下实例: #!/usr/bin/python # -*- coding: UTF-8 -*- fruits = ['banana', 'apple', 'man ...

  9. TTTTTTTTTTTTTT CF 95 B 构造4,7幸运数字 贪心 构造 string

    B. Lucky Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  10. poj 2718 Smallest Difference(暴力搜索+STL+DFS)

    Smallest Difference Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6493   Accepted: 17 ...