关于javascript: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, '女');

△ 工厂模式

为了解决 对象辨认的问题，又一个模式呈现了：构造函数模式

ECMAScript 中构造函数能够用来创立特定类型的对象，比方：Object、Array这种内置构造函数。

咱们也能够创立自定义的构造函数，定义自定义对象类型的属性和办法。

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, '女');

△ 构造函数模式

new Person()执行和一般函数执行的不同：

new操作符这种执行形式叫做 构造函数执行模式 ，此时的Person 不仅是一个函数名，还被称为类；而返回的后果赋值给 p1、p2 的是一个对象，称为实例，而函数体中的this 都是这个实例。

发问：什么是类？什么是实例？

△ 21.1_工厂模式 VS 构造函数模式

来，来，来，大家来找茬，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);

△ 来，亮出你的答案吧~

△ 21.2_简图 new 操作符做了哪些事件，请自行把 p3 的画进去，或者把图画全了

∴

p1的值是：undefined

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

p2和 p3 别离保留着 Person 的一个不同的实例，这两个对象都有一个construcotr（构造函数）属性，该属性指向Person：

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

△ 第三个输入啥？

对象的 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); //=> ?

△ L8 输入啥？

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); //=> ?

△ 输入什么?

其中，p2和 p3 同时也是 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);

△ 输入啥？

2、''空字符串、null、undefiend有啥区别？

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

4、构造函数和一般函数有啥不一样？

构造函数的问题 ：每个办法比方：sayName 都要在每个实例上从新创立一遍。

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, '女');

△ 构造函数：每个实例都会创立一遍 sayName 办法

△ 21.3_简图：每次创立实例，sayName办法都会被从新创立一次

那么，如何解决呢？

– end –

发问： 请实现 new 关键字的逻辑

构造函数模式

检测数据类型的办法

构造函数的问题