共计 2775 个字符,预计需要花费 7 分钟才能阅读完成。
文 / 景晚霞
起源公号 / 晚霞的光影笔记
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
关键字的逻辑