Javascript中创建函数的几种方法

// 工厂函数模式
// 无法解决对象识别问题
function person0(name, age, job) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
return obj;
}
// ---------------------------------------------------
// 构造函数模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
// 这个方法实例化时,会创建两次
this.sayName = function() {
alert(this.name);
};
} const person1 = new Person("test1", 19, "pig");
const person2 = new Person("test2", 19, "dog"); // ---------------------------------------------------
// 原型模式
// 初始化时无法自定义属性
function Person1() {}
Person1.prototype.name = "looyulong";
Person1.prototype.age = age;
Person1.prototype.job = job;
Person1.sayName = function() {
alert(this.name);
};
// ---------------------------------------------------
// 组合构造函数模式
// 构造函数定义属性,原型模式定义方法
function Per(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
} Per.prototype = {
constructor: Per,
sayName: function() {
alert(this.name);
}
}; const per1 = new Per("test1", 19, "pig");
const per2 = new Per("test2", 19, "dog"); // ---------------------------------------------------
// 动态构造模式
// 就是加了一个判断,判断原型上面是否有对应的方法
function Person2(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof this.sayName !== "function") {
Person2.prototype.sayName = function() {
alert(this.name);
};
}
} // ---------------------------------------------------
// 寄生构造函数模式
// 在构造函数的内部返回一个对象,也就是new的时候返回一个对象
// 与工厂函数其实没有很大区别,只是在写法上,工厂函数创建对象需要执行一个函数
// 通过这种模式,可以达到和工厂函数相同的效果,但是却是用new操作符调用的
function Person3(name, age, job) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
obj.sayName = function() {
alert(this.name);
alert(obj.name);
};
return obj;
} // ---------------------------------------------------
// 稳妥构造函数模式
// 没有公共属性,没有公共属性,不用this
// 因为有些环境无法是用this和new
function Person4(name, age, job) {
var obj = new Object();
obj.getName = function() {
return name;
};
obj.getAge = function() {
return age;
};
obj.getJob = function() {
return job;
};
obj.sayName = function() {
alert(name);
};
return obj;
}
上一篇:js控制input框只能输入数字和一位小数点和小数点后面两位小数


下一篇:javascript中document对象的属性和方法