<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>构造函数模式基础</title>
</head>
<body>
<script type="text/javascript">
// 工厂模式
function creatJSPerson(name,age) {
var obj= {};
obj.name = name;
obj.age = age;
obj.writeJS = function () {
console.log("my name is " + this.name + " i can write JS now");
};
return obj;
}
var p1 = creatJSPerson("ldh",18);
p1.writeJS();
// 构造函数模式
// 构造函数模式的目的就是为了创建一个自定义类,并且创建这个类的实例
function CreatJSPerson2(name,age) {
// 浏览器会默认创建的对象就是我们的实例p2 -> this
this.name = name;
this.age = age;
this.writeJS = function () {
console.log("my name is " + this.name + " i can write JS now");
};
// 浏览器再把创建好的实例默认返回
}
var p2 = new CreatJSPerson2("ldh",18);
p2.writeJS();
var p3 = new CreatJSPerson2("ryy",19);
p3.writeJS();
var res = CreatJSPerson2("哈哈",19); // 这样写不是构造函数模式执行而是普通的函数执行, 由于没有写return所以 res = undefined 并且CreatJsPerson2这个方法中的this是Window
// 构造函数和工厂模式的区别
// 1.执行的时候
// 普通函数执行 -> creatJsPerson()
// 构造函数模式 -> new CreatJSPerson2() 通过new执行后 我们的 CreatJSPerson2就是一个类了
// 函数执行的返回值->p2 就是CreatJSPerson2这个类的一个实例
// 2.在函数代码执行的时候
// 相同点:都是形成一个私有作用域,然后形参赋值->预解释->代码从上到下执行(类和普通函数一样,他也有普通的一面)
// 不同: 在代码执行之前,不用自己再手动创建一个对象,浏览器会默认的创建一个对象数据类型的值(这个对象其实就是我们当前类的一个实例)
// 接下来代码从上到下执行,以当前实例为执行的主体(this代表的就是当前的实例)然后分别把属性名和属性值赋值给当前的实例
// 最后浏览器会默认的把创建的实例返回
// 创建一个数组:
var ary = []; // 字面量方式
var ary2 = new Array(); // 实例创建的方式 -> 构造函数模式执行的方式
// 不管哪一种方式 ary/ary2 都是 Array这个类的一个实例
// 1.
// JS中所有的类都是函数数据类型,他通过new 执行变成了一个类,但是它本身也是一个普通的函数
// JS中所有的实例都是对象数据类型的
// 2.
// this在构造函数模式当中, this.xxx = xxx中的this就是当前类的实例
// 3.
// p2 和 p3 都是CreatJsPerson这个类的实例,所以都拥有writeJs这个方法,但是不同实例至今的方法是不一样的
// 在给实例增加的属性(this.xxx = xxx) 属于当前市里的私有的属性,实例和实例之间是单独的个体,所以私有的属性之间是不相等的
</script>
</body>
</html>
13-构造函数模式(基础)
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1. 构造函数模式 构造函数模式的函数体在每次new对象的时候都会执行一遍. new的话, 会自身创建一个作用域,...
- 首先今天先介绍一个新的模式,寄生(parasitic)构造函数模式,其基本思想是创建一个函数,该函数的作用仅仅是封...