OOP | 构造函数模式

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞,让我知道你来过~❥❥❥❥


构造函数模式

单例模式、高级单例模式

优点:把描述事务的信息都放到一个命名空间中进行归类,防止全局变量污染

缺点:不能批量生产

工厂模式

优点:用函数来封装创建对象的细节,低耦合(减少一个一个创建对象的冗余代码)、高内聚(提高代码复用率)

缺点:不清楚一个对象的类型,没有解决对象识别的问题

function createPerson(name, age, sex){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.sex = sex;
    o.sayName = function (){
        console.log(this.name);
    };
    return o;
}
let person1 = createPerson('李雷', 26, '男');
let person2 = createPerson('韩梅梅', 28, '女');

<i>△ 工厂模式</i>

为了解决对象识别的问题,又一个模式出现了:构造函数模式

ECMAScript中构造函数可以用来创建特定类型的对象,比如:ObjectArray这种内置构造函数。

我们也可以创建自定义的构造函数,定义自定义对象类型的属性和方法。

function Person(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayName = function (){
        console.log(this.name);
    };
}
let p1 = new Person('李雷', 26, '男');
let p2 = new Person('韩梅梅', 28, '女');

<i>△ 构造函数模式</i>

new Person()执行和普通函数执行的不同:

new操作符这种执行方式叫做构造函数执行模式,此时的Person不仅是一个函数名,还被称为;而返回的结果<i>赋值给p1p2的</i>是一个对象,称为实例,而函数体中的this都是这个实例。

提问:什么是类?什么是实例?

公众号:朝霞的光影笔记

<i>△ 21.1_工厂模式VS构造函数模式</i>

来,来,来,大家来找茬,Person() VS createPerson() 有哪些不同?

1、没有显示地创建对象

2、直接将属性和方法赋予了this对象

3、没有return语句

约定俗成的惯例:构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。所以,这里Person中的P是大写的,构造函数也是函数,只不过可以用来创建对象而已。

那么,new关键字都做了些什么呢?

1、创建了一个新对象

2、将构造函数的this指向这个新对象

3、执行构造函数中的代码

4、返回新对象

function Person(name, age){
    this.name = name;
    this.age = age;
}
let p1 = Person('李雷', 26);
let p2 = new Person('韩梅梅', 28);
console.log(p1, p2);
let p3 = new Person('莉莉', 27);

<i>△ 来,亮出你的答案吧~</i>

ID:zhaoxiajingjing

<i>△ 21.2_简图new操作符做了哪些事情,请自行把p3的画出来,或者把图画全了</i>

p1的值是:undefined

p2的值是:{name:'韩梅梅',age:28}

p2p3分别保存着Person的一个不同的实例,这两个对象都有一个construcotr(构造函数)属性,该属性指向Person

console.log(p2.constructor === Person); // true
console.log(p3.constructor === Person); // true
console.log(p2.constructor === p3.constructor); // ?

<i>△ 第三个输出啥?</i>

对象的constructor属性是用来表示对象类型的

 let arr = [];
 console.log(arr.constructor === Array); //=> true
 let obj = {};
 console.log(obj.constructor === Object); //=> true
 let fun = function (){};
 console.log(fun.constructor === Function); //=> true
 let reg = /^\d+$/;
 console.log(reg.constructor === RegExp); //=> ?

<i>△ L8 输出啥?</i>

检测数据类型的方法

1、typeof 不能具体区分对象,比如:typeof {} typeof [] typeof /^$/得到的结果"object"

2、constructor可以判断实例是通过谁构造出来的

3、instanceof 检测对象类型,可以通过__proto__区分实例

4、Object.prototype.toString.call()区分具体的类型,但不能区分实例

console.log(p2 instanceof Person); //=> true
console.log(p2 instanceof Object); //=> true

console.log(p3 instanceof Person); //=> ?
console.log(p3 instanceof Object); //=> ?

<i>△ 输出什么?</i>

其中,p2p3同时也是Object的实例,是因为所有对象都继承自Object

提问

console.log(typeof 12);
console.log(typeof 'null');
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof function (){});
console.log(typeof NaN);

<i>△ 输出啥?</i>

2、''空字符串、nullundefiend有啥区别?

3、 什么是类?什么是实例?

4、 构造函数和普通函数有啥不一样?

构造函数的问题

构造函数的问题:每个方法<i>比如:sayName</i>都要在每个实例上重新创建一遍。

function Person(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayName = function (){
        console.log(this.name);
    };
}
let p1 = new Person('李雷', 26, '男');
let p2 = new Person('韩梅梅', 28, '女');

<i>△ 构造函数:每个实例都会创建一遍sayName方法</i>

公众号:朝霞的光影笔记

<i>△ 21.3_简图:每次创建实例,sayName方法都会被重新创建一次</i>

那么,如何解决呢?

<i>- end -</i>

ID:zhaoxiajingjing

提问: 请实现new关键字的逻辑

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