源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详细分析Javascript中创建对象的四种方式

  • 时间:2020-07-01 00:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详细分析Javascript中创建对象的四种方式
[b]前言[/b] 使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看。 [b]工厂模式[/b]
 function createPerson(name, age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj; //一定要返回,否则打印undefined:undefined
 }
 var person1 = new createPerson('Young',18);
 console.log(person1.name + ':' + person1.age);
[b]优点:[/b]工厂模式可以解决创建多个相似对象 [b]缺点:[/b]没有解决对象识别问题(怎样确定一个对象的类型) [b]构造函数模式[/b]
 function Person(name,age){
 this.name = name;
 this.age = age;
 }
 var person1 = new Person('Young',18);
 console.log(person1.name + ':' + person1.age);
在说优缺点之前,先来说说她本身的一点小故事吧 [b]将构造函数当做函数使用[/b]
 function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 return this.name;
 }
 }
 
 //当做构造函数使用
 var person1 = new Person('Young', 18);
 person1.sayName();
 console.log(person1.name + ':' + person1.age);
 
 //当做普通函数调用
 Person('Wind', 18);
 console.log(window.sayName());
 
 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());
[b]构造函数优缺点[/b] [b]优点:[/b]可以将它的实例标识为一种特定类型 [b]缺点:[/b]每个方法都要在每个实例上重新创建一遍。当然你也可以这样改:
 function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
 }
 function sayName(){
 return this.name;
 }
改为调用全局函数,这样一来毫无封装性可言。。。接下来的原型模式可以弥补这个的不足 [b]原型模式[/b]
 function Person(){
 
 }
 Person.prototype.name = 'Young';
 Person.prototype.age = 18;
 Person.prototype.sayName = function(){
 return this.name;
 }
 
 var person1 = new Person();
 console.log(person1.sayName());
 var person2 = new Person();
 console.log(person1.sayName());
 alert(person1.sayName === person2.sayName);
 //person1和person2访问的是同一组属性的同一个sayName()函数
虽然可以通过对象实例访问保存在原型中的值,但却不能通过实例对象重写原型中的值
 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 person1.name='Wind';
 
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 alert(person1.sayName==person2.sayName);//true
在我们调用[code]person1.sayName[/code]的时候,会先后执行两次搜索,解析器先确定实例person1是否有[code]sayName[/code]的属性,有则调用自己的属性,没有则搜索原型中的属性。
 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 
 person1.name='Wind';
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 
 delete person1.name;
 console.log(person1.sayName());//Young
 console.log(person2.sayName());//Young
使用[code]hasOwnPropertyType[/code]方法可以检测一个属性是存在与原型中还是存在于实例中,该方法是从Object继承来的,实例中为true,原型中为false。 枚举对象上的实例属性用[code]Object.keys()[/code]方法
 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var keys=Object.keys(Person.prototype);
 console.log(keys);//["name", "age", "sayName"]
[b]原型模式优缺点[/b] [b]优点:[/b]不用每个方法都要在每个实例上重申一遍 [b]缺点:[/b]很少有人单独使用原型模式地。。问题详列
 function Person(){
 
 }
 Person.prototype={
 constructor:Person,
 name:'Young',
 age:18,
 friends:['Big','Pig'],
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person();
 var p2=new Person();
 p1.friends.push('Mon');
 console.log(p1.friends);//["Big", "Pig", "Mon"]
 console.log(p2.friends);//["Big", "Pig", "Mon"]
正是因为实例一般都要有自己的属性,而我们这里将他放在了[code]Person.prototype[/code]中,所以随着p1的修改,整个实例包括原型都修改了。那么,我们可以组合使用构造函数模式和原型模式。 [b]组合使用构造函数模式和原型模式[/b]
 function Person(name,age){
 this.name=name;
 this.age=age;
 this.friends=['Big','Pig'];
 }
 Person.prototype={
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person('Young',18);
 var p2=new Person('Wind',78);
 p1.friends.push('Raganya');
 console.log(p1.friends);//["Big", "Pig", "Raganya"]
 console.log(p2.friends);//["Big", "Pig"]
 console.log(p1.friends==p2.friends);//false
 console.log(p1.sayName==p2.sayName);//true
这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。 [b]总结[/b] 以上就是关于分析Javascript中创建对象方式的全部内容,通过这篇文章为大家总结的四种方式和其优缺点,希望可以对大家学习使用Javascript能有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部