{ 单例模式

对象数据类型的作用：
把描述同一个事物的属性和方法放在一个内存空间下，起到了分组的作用，这样不同事物之间的属性即使属性名相同，相互也不会发生冲突
-> 我们把这种分组编写代码的模式叫做 “单例模式”
-> 在单例模式中我们把 person1 叫做 “命名空间”

var person1 = { name: 'rose', age: 20 };

单例模式是一种项目开发中经常使用的模式，因为项目中我们可以使用单例模式来进行 “模块化开发”（大的项目，需要多人协作开发，把项目分成几个功能模块，同时开发，最后合并）

// 公共方法
var utils = {
	select: function(){ }
}
// 页面模块中的 change()方法 -> tab 选项卡变化
// 搜索模块中的 change() 方法 -> 搜索内容变化
// 解决冲突，用单例模式
var tabRender = {
	change: function() {
		utils.select(); // 调用公共方法
		this.showCt(); // 调用同一命名空间的方法
// 最好用 this, change 方法调用的时候，tabRender.change(); this 就是 tabRender
//如果命名空间需要要改名，这里用 this 就很方便
	}
	showCt:function(){ }
}

{ 工厂模式

var jsPerson1 = {
	name: 'rose',
	age: 23,
	action: function(){
		console.log('my name is '+ this.name);
	}
}

以上代码，如果是 n 个人呢，需要重复写 n 次
单例模式虽然解决了分组的作用，但是不能实现批量的生产

function createPerson(name,age){
	var person = {};
	person.name = name;
	person.age = age;
	person.action = function(){
		console.log('my name is '+ this.name);
	}
	return person;  // 返回对象
}
var p1 = createPerson('jack',33);
p1.action();

把实现同一件事情的相同的代码放到一个函数中，以后如果再想实现这个功能，只需要执行当前函数即可 -> “ 函数封装”
-> 低耦合高内聚：减少页面中的冗余代码，提高代码的重复利用率

js 是一门轻量级的脚本语言， html css 不属于编程语言，属于标记语言

所有的编程语言都是面向对象开发的 -》类的继承、封装、多态
继承：子类继承父类中的属性和方法
多态：当前方法的多种形态，->后台语言中，多态包含重载和重写
“js中不存在重载”，方法名一样的话，后面的会把前面的覆盖，最后只保留一个
js中有一个操作类似重载但不是重载，可以根据传递参数的不一样，实现不同的功能

function sum(num){
	if(typeof num ==='undefined'){
		return 0;
	}
	return num;
}

{ 构造函数模式

构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例

构造函数模式和工厂模式的区别
1 执行的时候
– 普通函数执行 -> createJsPerson()
– 构造函数模式工-> new CreateJsPerson() ( 约定俗成，大写)
通过 new 执行后， CreateJsPerson就是一个类了，返回值是类的一个实例
2 函数代码执行的时候
都形成一个私有的作用域，然后形参赋值->预解释->代码从上到下执行
不同：在代码执行之前，不用手动创建对象，浏览器会默认的创建一个对象类型的值，(这个对象就是当前类的一个实例 ) 构造函数模式中，不用创建 obj 对象，用 this,代表当前实例，分别把属性名和属性值传给当前实例，也不用 return ，最后浏览器会默认的把当前实例返回

// 创建一个数组
var arr = []; // 字面量方式
var ary = new Array(); // 实例创建的方式，构造函数模式执行的方式
使用一个未声明的变量
console.log(window.x); // undefined
console.log(x); // 报错

js中所有的类都是函数数据类型的，所有的实例都是对象数据类型的

this 问题：在构造函数模式中，类中出现 this.xxx = xxx; 其中 this 指的是当前类的一个实例
在构造函数模式中，不同实例的方法是不一样的

console.log( p1.action === p2.action) ; // false

在类中给实例增加的属性（this.xxx = xxx）属于当前实例的私有属性，实例和实例之间是单独的个体，所以私有的属性之间是不相等的

在构造函数模式中，使用 var res = CreatePerson(‘jack’, 22); // 这样写是普通函数执行，因为没有 return, 所以 res 的值为 undefined; 并且 CreatePerson 这个方法中的 this 是 window

function Fn(){
	this.x = 100;
	this.getX = function(){
		console.log( this.x);
	}
}
var f1 = new Fn;
f1.getX();  // this -> f1  结果 100
var ss = f1.getX;
ss();  // this -> window  结果 undefined

1.在构造函数模式中， new Fn() 执行，如果不需要传参，后面的小括号可以省略

2.this问题：在类中出现的 this.xxx = xxx 中的 this 都是当前类的实例，而某一个属性（方法）中的 this ，需要看方法执行的时候，前面是否有 . (点),才能知道 this 是谁

3.在 Fn 中，添加 var num = 10; 最后 console.log( f1.num ); 结果： undefined
类有普通函数的一面，当函数执行的时候，var num 其实只是当前形成的私有作用域中的私有变量而已，它和实例没有任何的关系，只有 this.xxx = xxx 才相当于给实例增加私有的属性和方法

4.在 Fn 中，手动添加 return
在构造函数模式中，浏览器会默认的将实例返回，是一个对象数据类型的值
如果手动写了 return
a) return 100; 返回的是一个基本数据类型的值，当前实例不变
b) return {…}; 返回的是一个引用数据类型的值，当前实例会被手动写的返回的值替换，f1 就不是 Fn 的实例了，而是对象 { … }

5.检测某一个实例是否属于这个类 instanceof

console.log(f1 instanceof Fn); // true
console.log(f1 instanceof Array); // false
console.log(f1 instanceof Object); // true

因为所有的实例都是对象数据类型的，而每一个对象数据类型都是 Object 这个内置类的一个实例，所以 f1 也是 Object 的一个实例

instanceof 用处：对于检测数据类型来说， typeof 有自己的局限性，不能细分 object 下的对象、数组、正则

var arr = [];
console.log( arr instanceof Array); // true 说明是数组

6.属性检测
in: 检测某一个属性是否属性这个对象，私有和公有属性，只要存在，用 in 来检测都是 true
hasOwnProperty: 检测某一属性是否为这个对象的私有属性，这个方法只能检测出私有的属性

console.log('in:', 'getX' in f1);  //  true
console.log('hasOwnProperty:', f1.hasOwnProperty('getX')); // true

思考：检测某一属性是否为公有属性

function hasPublicAttr(obj, attr){
	return (attr in obj) && !obj.hasOwnProperty(attr);
}

7 isPrototypeOf
控制台： dir( Object.prototype) 回车

珠峰js笔记1.2(原型链模式)

{ 单例模式

{ 工厂模式

{ 构造函数模式

猜你喜欢