一、单例模式
把描述同一个事物(对象)的属性和方法放在同一个命名空间下防止相互之间的冲突,实现了分组,这种编写代码的模式就是
单例模式
,可以用来进行模块化开发
。
模块化开发
即是根据需求将项目划分成不同的功能板块,分别进行开发,最后再进行合并。
虽然实现了分组,但是不能批量
生产,属于手工作业模式
单例模式中给每个对象开辟的空间叫做命名空间
var utils = {
work: function(){
console.log('I can write JS');
}
};
var person1 = {
name: 'html',
feature: 'frame'
write: function(){
console.log('I can write html');
}
};
var person2 = {
name: 'css',
feature: 'decoration'
write: function(){
console.log('I can write css');
}
// 在当前命名空间下调用其他命名空间内的方法
utils.work();
// 在当前命名空间下调用本命名空间内的方法
skills: function(){
console.log('I can decorate html');
this.write();
}
};
// person1和person2就叫做命名空间
二、工厂模式
把实现同一个功能的相同代码放到一个函数中,只需要执行当前函数,就可以实现该功能,这种模式叫做
工厂模式
,也即,函数的封装(低耦合高内聚)
,可减少冗余代码,提高代码的复用率
function createPerson(name, age){
var obj = {};
obj.name = name;
obj.age = age;
obj.work = function () {
console.log(`my name is ${this.name}, i can write JS`);
}
return obj;
}
var person1 = createPerson('lulu', 23);
person1.work();
var person2 = createPerson('xia', 24);
person2.work();
JS是一门轻量级的
编程语言
(HTML+CSS属于标记语言)
所有编程语言都是面向对象开发的,都有类的封装,继承和多态的特性
继承
:子类继承父类中的属性和方法
多态
:当前类的多种形态,包含重载和重写,重载指函数名相同,参数(包括类型数量等)不同,从而实现不同的功能;重写指方法名相同,参数相同,当前方法覆盖之前定义的方法
JS中当然也有多态,但是不存在重载,只要方法名相同,就会覆盖前面的,只保留一个。
JS中有一个操作类似重载但不是重载:可以根据传递参数的不一样,实现不同的功能
function sum(num){
if(typeof num === 'undefined'){
return 0;
}
return num;
}
sum(); // 0
sum(10); // 10
三、构造函数模式
构造函数和工厂模式的区别:
1、执行的时候:普通函数->createPerson();构造函数->new createPerson() 通过new执行后,createPerson就称作一个类,规范起见,类名首字母一般大写。函数执行的返回值就是类的一个实例。
2、函数代码执行的时候都是形成一个私有作用域,经历形参赋值
,变量提升
,代码从上到下执行
的步骤
构造函数创建不需要自己定义对象,浏览器会创建一个默认的对象,这个对象就是当前创建的实例。用this
代表,分别把属性名和属性值赋值给当前实例。最后浏览器默认返回当前实例。
function CreatePerson(name, age){
this.name = name;
this.age = age;
this.work = function () {
console.log(`my name is ${this.name}, i can write JS`);
}
}
var p1 = new CreatePerson('lulu', 23);
var p2 = new CreatePerson('lulu', 23);
console.log(p1.work === p2.work); // false
JS中所有的类都是函数数据类型的,即就是一个普通的函数
在构造函数中的this是当前类的一个实例
在类中给实例增加的属性都是私有属性,实例之间的私有属性互不相等
function Fn() {
var num = 10;
this.x = 100; // this是实例
this.getX = function (){
console.log(this.x); // this要在方法执行的时候确定
}
}
var f1 = new Fn();
var f2 = new Fn;
console.log(f1.num); // undefined
var res = f1.getX;
res(); // 此时函数里的this是window 会输出undefined
一些细节知识点
1、在构造函数模式中, new Fn()执行,若不需要传参,则可以省略括号。普通函数中不可省略(Fn()执行,Fn不执行,就是函数本身)。
2、this的问题:在类中出现的this是当前实例本身,但是某一方法中的this要看方法执行的时候.(点)前面是谁才能确定。
3、类也是普通函数,var出来的变量只是当前私有作用域下的私有变量,只有this.xxx = xxx才是给实例增加私有属性和方法。
4、构造函数模式中浏览器会默认返回实例(对象数据类型);若手动返回则分为两种情况:返回基本数据类型
的值,当前实例不会改变,如return 100; 返回的是引用数据类型
的值,当前实例会被这个值覆盖掉,如return {name: 'js'},此时new出来的实例就是这个对象了。
5、检测某个实例是否属于某个类
console.log(f1 instanceof Fn); //-> true
console.log(f1 instanceof Array); //-> false
console.log(f1 instanceof Object); //-> true 所有实例都是对象数据类型的
6、f1和f2都是Fn这个类的实例,都拥有x和getX属性,但两个属性都是各自的私有属性
in
:检测某一个属性是否属于当前对象(attr in object),私有公有属性
都可检测
hasOwnproperty
:检测某一属性是否是当前对象的一个私有属性
利用上面两个方法可以检测某一个属性是否是对象的公有属性
function hasPubProperty(obj, attr){
return (attr in obj) && !(obj.hasOwnProperty(attr));
}
7、
isPrototypeOf
:检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中。
构造函数中拥有了类和实例的概念,并且实例和实例之间是相互独立的-> 实例识别
四、原型链函数模式
基于构造函数模式的原型链模式解决了方法或属性的公有问题,即把实例上相同的属性和方法提取成公有属性和方法,通过CreatePerson.prototype原型操作即可。
function Fn() {
var num = 10;
this.x = 100;
}
Fn.prototype.getX = function () {
console.log(this.x);
}
var f1 = new Fn();
1、每一个函数数据类型(函数,类)都有一个自带属性:
prototype
(原型),该属性值是一个对象数据类型的值
2、浏览器给prototype
添加了一个属性constructor
(构造函数),属性值就是当前函数(类)本身。
3、每一个对象数据类型(普通对象,实例,prototype...)自带一个_proto_,属性值是当前实例所属类的原型
Object是JS中所有对象数据类型的基类
1、f1 instanceof Object -> true f1可以通过__proto\__
属性向上级查找,最后总能查找到基类Object
2、Object.prototype
上没有__proto\__
属性,即使有也指向本身,毫无意义
3、原型链模式
f1.hasOwnProperty('x')
可以执行,说明hasOwnProperty也是f1的一个方法,但是f1上并没有这个方法,处理方法是:
首先在对象的私有属性上进行查找,若私有属性中存在,则获取私有的属性值,若没有就通过__proto\__
属性找到所属类的原型(所属类的原型上定义的都是当前实例公有的属性和方法),原型上有就获取该公有属性,若原型上也没有,继续通过原型的__proto\__
属性向上查找直到基类的原型,若还是没有就返回undefined。
这种查找模式即原型链模式
。
原型扩展
1、批量设置原型上的共有属性和方法
// 1、设置一个新的变量保存原型的地址 不常用
var pro = Fn.prototype;
pro.xxx = '';
// ...
// 2、手动创建一个新的内存给原型 先保存原来的
var pro = Fn.prototype;
Fn.prototype = {
constructor = Fn,
//...
};
2、
枚举和不可枚举
var obj = {name: 'js'};
Object.prototype.aa = function () { }
// for in 循环会遍历私有公有属性 但一般情况下只需要遍历其私有属性
// 可枚举属性propertyISEnumerable
for(var key in obj){
if(obj.propertyIsEnumerable(key)){
console.log(key);
}
}
// 和hasOwnProperty搭配
for(var key in obj){
if(obj.hasOwnProperty(key)){
console.log(key);
}
}
3、
Object.create()
IE6-8不兼容
创建一个拥有指定原型和若干指定属性的对象,一个参数作为新创建对象的原型,使用Object.create()是将对象继承到proto属性上
var obj = {season: 'summer', weather: 'hot'};
var obj1 = Object.create(obj);
// 即:创建一个新对象obj1,并且让obj作为这个新对象的原型
// 自己实现Object.create()
function objectCreate(o){
function Fn() {}
Fn.prototype = o;
return new Fn();
}
var newObj = objectCreate(obj);