关于js面向对象基础(单例模式、工厂模式、构造函数模式、原型链模式)

1.单例模式

对像数据类型的作用
把描述同一个事物(同一个对像)的属性和方法放在同一个内存空间下,起到了分组的作用,这样不同的事物之间的属性即使属性名相同,相互也不会起冲突,我们把这种分组编写代码的模式叫做‘单例模式’。
例:

var personal1 = {
  name: 'ant',
  age: '20'
};
var personal2 = {
  name: '张飞',
  age: '32'
}
// 在上面单例模式中我们常把personal1和personal2叫做命名空间。单例模式主要解决了分组的作用,但是不能批量生产
2.工厂模式

把实现同一件事情的相同代码方到同一个函数中。工厂模式也称‘函数的封装’
'低耦合高内聚': 减少页面的冗余代码,提高代码的重复利用率.

例:

function createPersonal (name, age) {
  var obj = {};
  obj.name = name;
  obj.age = age;
  obj.personal = function () {
    console.log('name'+ this.name + ';' + 'age' + this.age)
  }
  return obj
}
var p1 =  createPersonal('ant', 35);
p1.personal()
3.构造函数模式

构造函数模式的目的是为了创建一个自定义类,并且创建这个类的实例。构造函数模式拥有了类和实例的概念,并且实例和实例之间是相互独立拉开的,实例识别
js中的所有类都是函数数据类型的,它通过new执行变成了一个类,但是本身也是一个普通函数;js中所有的实列都是对象数据类型的。

3.1 构造函数和工厂模式的区别:

(1)执行的时候
1.1 普通函数的执行 createPersonal()
1.2 构造函数模式 new CreatePersonal() 通过new来执行后,CreatePersonal就是一个类了
// 函数的返回值p1就是CreatePersonal的一个实例
(2)在函数代码执行的时候
相同:都是形成了一个私有的作用域,然后形参赋值->预解释->代码从上到下执行(类和普通函数一样,有普通函数的一样)
不同:在代码执行之前,不用手动的创建对象了,浏览器会默认创建一个对象数据类型的值(这个对象其实就是我们当前的一个实例)。接下来代码从上到下执行,以前当前实例为执行的主体(this就是当前的实例),然后分别把属性名和属性值赋值给当前的实例。浏览器会默认的把创建的实例返回。

3.2在构造函数模式中new Fn()执行,如果Fn不需要传递参数的话,后面小括号可以省略。

例:

function CreatePersonal (name, age) {
// 浏览器默认创建了p1,这时候this就是指的p1
 this.name = name;  
 this.age = age;
 this.personal = function () {
    console.log('name'+ this.name + ';' + 'age' + this.age)
  }
// 浏览器把
}
var p1 = new CreatePersonal('ant', 35);
p1.personal()

var p2 = new CreatePersonal('dog', 10);
p2.personal()
// console.log(p1.personal === p2.personal)  // false
// 在类中给实例增加的属性this.xxx = xxx属于当前实例的私有属性,实例和实例之间是单独的个体,所有私有的属性之间是不相等的


拓展:
// js当中所有的类都是函数数据类型的,它通过new执行变成了一个类,但是它本身也是一个普通的函数
// js当中所有的实例都是对象数据类型的
3.3类有普通函数的一面,当函数执行的时候,var num是当前函数形成的私有的作用域中的私有变量,它和f1这个实例没有任何关系;只有this.xxx = xxx才相当于给f1这个实例添加的私有的属性和方法,才和f1有关系

例:

function Fn () {
  var num = 100;
  this.x = 200;
  this.Fn1 = function () {
    console.log(this.x)
  }
}
var f1 = new Fn;
console.log(f1.num) // undefined
3.4在构造函数模式中,浏览器会默认的把我们的实例返回(返回一个对象数据类型的值);但是如果我们自己手动加一个return返回:

3.4.1返回一个基本的数据类型,当前的实例不变;例如return 200
3.4.2返回一个引用数据类型的值,当前实例会被自己返回的给替换掉例如return {name:'ant'},这时候f2是对象{name: 'ant'}

3.5检查某一个实例是否属于这个类,用instanceof检测
    // console.log(f1  instanceof  Fn)  //true
3.6 in是检测一个属性是否属于这个对象 attr in object
    console.log(Fn1 in f1)  // true
    hasOwnProperty:用来检测某一个属性是否为这个对象的私有的属性,这个方法只能检测私有的属性
    console.log(f1.hasOwnProperty('Fn1'))
function Fn () {
  var num = 100;
  this.x = 200;
  this.Fn1 = function () {
    console.log(this.x)
  }
  return 200
}
var f1 = new Fn;
console.log(f1.num) // undefined
console.log(f1)   //还是this.x =200 ;this.Fn1 = function() {}

function Fn1 () {
  var num = 100;
  this.x = 200;
  this.Fn1 = function () {
    console.log(this.x)
  }
  return {name: 'ant'}
}
var f2 = new Fn1;
console.log(f2)  // 返回 {name: 'ant'}
4.原形链模式
4.1 每一个函数数据类型(普通函数、类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值。
4.2 并且在prototype上浏览器天生给它加上一个属性constructor(构造函数),属性值是当前函数(类)本身。
4.3 每一个对象数据类型(普通对象、实例、prototype...)也天生自带一个属性: _ proto_,属性值是当前实例所属类的原型(prototype)
function Fn () {
  var num = 100;
  this.x = 200;
}
Fn.prototype.fn1 = function () {
    console.log(this.x)
  }
var f1 = new Fn;
console.log(Fn.prototype.constructor === Fn) // true

备注:
// 1.Object是所有数据类型的基类(最顶层的类)
// 1.1 f1 instanceof Object ->true 因为f1通过_ proto_可以往上级查找,不管多少级,最后总能找到Object
// 1.2. 在Object.prototype上没有_ proto_这个属性

// 2.原型链模式
(1)通过 对象名.属性名 的方式获取属性值的时候,首先在对象的私有属性上进行查找,如果私有中存在这个属性,则获取的是私有属性的值;如果私有的没有,则通过_ proto_找到所属类的原型(类的原型上定义的属性和方法都是当前实例公有的属性和方法),原型上存在的话,获取的是公有的属性值;如果原型上也没有,则继续通过_ proto_继续向上查找,一直找到Object.prototype为止。这种查找的机制就是原型链模式

function Fn () {
  var num = 100;
  this.x = 200;
  this.sum = function(){}
}
Fn.prototype.fn1 = function () {
    console.log(this.x)
  }
Fn.prototype.sum = function () {}
var f1 = new Fn;
var f2 = new Fn;
console.log(Fn.prototype.constructor === Fn) // true
f1.sum === f2._proto_.sum   //  false   f1.sum是私有的,f2找的sum是公有的
f1.sum === Fn.prototype.sum // false f1.sum是私有的,Fn找的sum是公有的
f1.sum = function () {
  //修改自己私有的sum
}
f1._proto_.sum = function () {
  // 修改所属类原型上的sum,修改公有的
}
Fn.prototype.sum = function () {
  // 修改公有的sum
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容