博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript创建对象的7种模式
阅读量:6873 次
发布时间:2019-06-26

本文共 3742 字,大约阅读时间需要 12 分钟。

hot3.png

//Javascript创建对象的7种模式	//1.工厂模式	function createPersonal(name,age,job){		var o = new Object();		o.name = name;		o.age = age;		o.job = job;		o.doWhate = function(){			console.log(this.job)		}		return o;	}	var personal1= createPersonal('李强',11,'web');	personal1.doWhate();//web	//2.构造函数模式	function createPersonal2(name,age,job){		this.name = name;		this.age = age;		this.job = job;		this.doWhate = function(){			console.log(this.name)		}	}	var personal2 = new createPersonal2('LXQ',11,'web');	personal2.doWhate();//LXQ	console.log(personal2 instanceof Object);//true  检测类型	//问题:1.每个方法都要在每个实例上重新创建一遍	//		>>过把函数定义转移到构造函数外部来解决这个问题	function createPersonal3(name,age,job){		this.name = name;		this.age = age;		this.job = job;		this.doWhate = doWhate;	}	function doWhate(){		console.log(this.age);	}	var personal3 = new createPersonal3('xxx',213,'web');	personal3.doWhate();//213	doWhate();//undefined	//待续...
//3.原型模式	//每个函数都有一个prototype(原型)属性,这个属性是指针,指向对象	//prototype就是通过调用构造函数而创建的那个对象事例的原型对象	//所有的原型对象都会自动获得一个constructor(构造函数)属性	function test(){		console.log(111)	}	function Personal4(){};	Personal4.prototype.name = 'lxq222';	Personal4.prototype.age= 313;	Personal4.prototype.job = 'web';	Personal4.prototype.sayName = function(){		console.log(this.name);		//test()	}	var personal5 = new Personal4();	personal5.sayName();	console.log(personal5.hasOwnProperty('name'));//检测属性是否存在于实列还是原型中	//更简单的原型语法	function Personal6(){};	Personal6.prototype = {		name:'lxq123',		age:'132',		obej:'web',		sayName:function(){			console.log(this.name)		}	}	var personal7 = new Personal6();	personal7.sayName();	Personal6.prototype.startsWith = function (text) {    	return this.indexOf(text) == 0;	};	var msg = "Hello world!";	console.log(msg.startsWith("Hello")); //true	Personal6.prototype.startsWith2 = function () {    	console.log(this.name)	};	personal7.startsWith2(); //lxq123
//4.组合使用构造函数模式和原型模式(最广泛、认同度最高)	function Myself(name,age,job){		this.name = name;		this.age = age;		this.job = job;		this.friends = [];	}	Myself.prototype = {		constructor:Myself,		sayName:function(){			console.log(this.friends);		}	}	var Myself2 = new Myself('lxq',123,'web');	var Myself3 = new Myself('LXZ',136,'JAVA');		Myself2.gogo = function(){		console.log(this.job)	}	Myself2.friends.push('啦啦啦');	Myself2.sayName();	console.log(Myself2.friends);	Myself2.gogo()
//5.动态原型模式	function Person(name, age, job){	//属性	this.name = name;	this.age = age;	this.job = job;	// 方法		if (typeof this.sayName != "function"){			Person.prototype.sayName = function(){				alert(this.name);			};		}	}	var friend = new Person("Nicholas", 29, "Software Engineer");	friend.sayName();	//6.寄生构造函数模式	function Person(name, age, job){		var o = new Object();		o.name = name;		o.age = age;		o.job = job;		o.sayName = function(){			alert(this.name);		};		return o;	}	var friend = new Person("Nicholas", 29, "Software Engineer");	friend.sayName(); //"Nicholas"	//除了使用 new 操作符并把使用的包装函数叫做构造函数之外, 这个模式跟工厂模式其实是一模一样的。	//工厂模式为	function createPerson(name, age, job){		var o = new Object();		o.name = name;		o.age = age;		o.job = job;		o.sayName = function(){			alert(this.name);		};		return o;	}	var person1 = createPerson("Nicholas", 29, "Software Engineer");	var person2 = createPerson("Greg", 27, "Doctor");	//7.稳妥构造函数模式	/*稳妥对象最适合在一些安全的环境中 (这些环境中会禁止使用 this 和 new ) , 或者在防止数据被其他应用程    序 (如 Mashup程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的    实例方法不引用 this ;二是不使用 new 操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的 Person      构造函数重写如下。*/	function Person(name, age, job){		//创建要返回的对象		var o = new Object();		//可以在这里定义私有变量和函数		//添加方法		o.sayName = function(){			alert(name);		};		//返回对象		return o;	}	var friend = Person("Nicholas", 29, "Software Engineer");	friend.sayName(); //"Nicholas"

 

转载于:https://my.oschina.net/newgoup/blog/703817

你可能感兴趣的文章
C#实现接口xml序列化与反序列化
查看>>
[译]Godot系列教程一 - 场景与节点
查看>>
BUG级别定义标准
查看>>
Java常考面试题(经典)
查看>>
可能是迄今为止最好的GitHub代码浏览插件--赞
查看>>
ASP.NET Core 微服务初探[1]:服务发现之Consul
查看>>
HDU-1072 Nightmare BFS
查看>>
认清世界,认清自我,超凡脱俗
查看>>
如何在Fedora 22上面配置Apache的Docker容器
查看>>
Swift 控制流
查看>>
css浮动、BFC、定位问题
查看>>
ThoughtWorks雷达上的新奇变化
查看>>
Kubernetes首爆严重安全漏洞,请升级你的Kubernetes
查看>>
Linux之父为过去的言行道歉,宣布离开社区反思
查看>>
家政APP开发,需要注意什么问题?
查看>>
【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】
查看>>
C语言接口与实现实例
查看>>
含有汉字的固定字符由ZHS16GBK数据库导入到AL32UTF8的数据库
查看>>
php-fpm进程数优化
查看>>
iOS中如何对具有复杂依赖的SDK在真机上进行单元测试
查看>>