- 单例模式 高级单例模式
- 工厂模式
- 构造函数模式
- 原型模式
单例模式
就是一个普通对象,把要用到的方法或者属性都放到一个对象里边,这个对象称为命名空间 ,一把用来作为工具库的封装, 函数库 ; jQuery 高级单例模式,工具库函数命名:common.js utils.js tools.js
高级单例就是一个闭包,一般可以进行普通的模块化开发
//单例
var per1 = {
name:'小明',
age:10,
sex:1,
eat(){},
play(){}
}
var per2 = {
name:'小明2',
age:102,
sex:12,
eat(){},
play(){}
}
// 高级单例
function fn(){
var name = 'xxx';
var age = 10;
function init(){
console.log(name,age)
}
return {
init
}
}
var obj = fn();
obj.init();
工厂模式
一个函数,用于批量生产单例
var per1 = {
name:'hahh',
age:19,
sex:'男',
eat(){}
}
function factory(name,age,sex){
var obj = {
name,age,sex,
eat(){
},
play(){},
}
return obj;
}
var per11 = factory('小明',20,'男')//批量产生单例
console.log(per11);
构造函数模式
ES5构造函数
function Person(name,age){
this.name = name;
this.age = age;
this.eat = function(){}
this.play = function(){}
return 123;
}
var f = function(){};
console.log(typeof f ==='object');
var p = new Person('xm',10);
new执行函数的时候,函数内部的this都指向了一个堆内存,函数执行完成之后,又把this返出去了,若写了返回值。而且返回值是一个值类型,那么返回值仍然是this,若返回值是引用数据类型,则返回值就是这个引用类型数据
ES6 用class申明一个构造函数
es6创造类是通过class创造的,只能通过new的方式执行
class FN3 {
constructor(name,age){
this.name=name;
this.age = age;
}
}
var f3 = new FN3(ff',10);
console.log(f3);
es6的箭头函数不能通过new的方式执行 ,箭头函数中没有this,箭头函数把this当成普通变量对待,里边的this是向上级作用域查找的。
var FN = () => {
this.name = 111;
}
原型模式
- 原型模式:在构造函数的基础上加了一个原型(prototype)的概念 特点:公用,省空间 框架常用,平时不用 把公用的提取出来放在原型里面
- 查属性:现在自己身上查,没有再去原型上查。如果自己有就用自己的,没有再用公用的
ES5
function Person(name = 'ff',age=10,sex=0) {
this.name=name;
this.age=age;
this.sex = sex;
}
console.log(Person.prototype);
Person.prototype.eat = function(){
console.log('吃')
}
Person.prototype.play = function(){
console.log('玩')
}
Person.prototype.qqq=122;
var p1 = new Person();
var p2 = new Person();
console.log(p1,p2);
ES6
//es6
class Fn{
//里面只能写函数,函数格式规定死的
//constructor是指向元素本身的
constructor(name,age,sex){
this.name = name;
this.age=age;
this.sex = sex;
}
eat(){
}
play(){
}
}
var f = new Fn();//class声明的只能通过new的方式执行
console.log(f);