js 面向对象的程序设计 ------小结

1、原由

前段时间，看了红宝书第三版，尤其的中间 面向对象一节，由于水平过低吧，看的迷迷糊糊，基本不知到讲的是什么，今天突然再次看到，仿佛懂了不少，于是写写这篇笔记

2、理解对象

js中对象，原文中这样定义，一组没有特定顺序的值，也就无序属性的集合（不同于其他语言中对象的定义，这里不做探究，能理解就行）

3、对象的属性、读取对象属性的特性

简单来说，对象内部有几个属性，大概就是 该对象是否可读，可枚举…，了解Js的应该都知道，接下来就是读取对象属性的特性，在其内还有两个函数 getter和setter，这两个函数相当于操作该对象时会触发的两个钩子函数，vue框架 便是利用这特性实现的

4、前面讲了对象的基础知识，那么该如何创建、使用对象呢？

-----------创建对象------------

4.1工厂模式创建对象

首先，创建对象大家都知道 无非是 new Obejct 或者 字面量的方式 let obj = {xxx}，对 说的没错，但是在软件工程设计中，这样是不是有点low了，或者说有时会显得累赘？
所以，有人搞出了 工厂模式 创建对象

	function creatObj ( name,age ) {
		var obj = new Object()
		obj.name = name
		obj.age = age
		obj.fn = function () {}
		return obj
	}
	写法很简单，相当于把创建的步骤封装在一个方法里面，需要时调用

但是这种方式创建，让人 不知道怎么判断 对象的类型

4、2构造函数

由于 工厂模式无法识别所创建对象的类型，于是有人发明了 构造函数方式

	function Person ( name,age ) {
		this.name = name
		this.age = age
		this.say = function () {}
	}
	var obj = new Person

	构造函数方式与工厂函数相比：
	1、函数名首字母大写
	2、没有显示的创建对象
	3、没有return

构造函数 一个new 操作，其实发生了一下几件事：
1、创建了一个对象
2、绑定了this(将当前this指向了这个新对象)
3、执行构造函数中的代码，初始化属性，返回这个对象

通过这种方式创建对象，我们可以轻松的通过 instanceof、constructor去判断所创建对象是否是该构造函数的实例、该对象的 constructor (构造函数)是否指向 其构造函数

缺陷：上面这种方式每实例一个对象，都会创建一个 say 方法，也就说 不是同一个 Function 的实例，同样的方法，为什么要实例多次呢？

因此，出现了原型模式，中途也有以下写法

function Person ( name,age ) {
		this.name = name
		this.age = age
		this.say =  say
}
	var obj = new Person
function say () {}
这样相当于，把方法都定义到了全局，那还封装干嘛？抛弃

5、原型模式

每个函数都有一个 prototype 属性，这个属性是一个指针，指向原型对象，这个对象上面包含了特定实例所共享的 方法和 属性

function Person () {}
Person.prototype.name = xxx
		...say = xxx

原型模式，主要理解 prototype constructor proto，这几个属性之间的关系

首先，构造函数 有一个 prototype属性------->原型对象（包含共享数据方法）

原型对象上有一个constructor（构造函数），指向它的构造函数 Person.prototype.constructor = Person

构造函数的实例 内部上有一个 proto 属性，又指向了构造函数的 原型对象

p.proto = Person.prototype

这块比较绕，多理几次，就知道，上面说了那么多，让我们知道了，实例出来的对象，我们可以判断它的对象类型，同时我们也应该要知道 上面的属性 到底是 原型上的，还是后面实例上添加的？

in 操作符 hasOwnPropety in 操作符，只要能找到，都返回true(不管是原型还是实例)，hasOwnPropety只存在实例中

6、组合使用构造函数和原型模式

通过原型模式我们的确很好用，但是很繁琐，定义个属性也要 Person.prototype xx的敲（当然这只是简单的说），于是有了组合使用

function Person ( name,age ) {
		this.name = name
		this.age = age
		this.say =  say
		Person.prototype.say = function(){}
}

未完待续。。。

总结：再一次看，果然更加清晰，书中也是 一步一步解释延伸的