<!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>
网友评论