当前位置:Gxlcms > JavaScript > 详细分析Javascript中创建对象的四种方式

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

时间:2021-07-01 10:21:17 帮助过:2人阅读

前言

使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看。

工厂模式

  1. function createPerson(name, age){
  2. var obj = new Object();
  3. obj.name = name;
  4. obj.age = age;
  5. return obj; //一定要返回,否则打印undefined:undefined
  6. }
  7. var person1 = new createPerson('Young',18);
  8. console.log(person1.name + ':' + person1.age);

优点:工厂模式可以解决创建多个相似对象

缺点:没有解决对象识别问题(怎样确定一个对象的类型)

构造函数模式

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. var person1 = new Person('Young',18);
  6. console.log(person1.name + ':' + person1.age);

在说优缺点之前,先来说说她本身的一点小故事吧

将构造函数当做函数使用

  1. function Person(name,age){
  2. this.name=name;
  3. this.age=age;
  4. this.sayName=function(){
  5. return this.name;
  6. }
  7. }
  8. //当做构造函数使用
  9. var person1 = new Person('Young', 18);
  10. person1.sayName();
  11. console.log(person1.name + ':' + person1.age);
  12. //当做普通函数调用
  13. Person('Wind', 18);
  14. console.log(window.sayName());
  15. //在另一个作用域中调用
  16. var obj = new Object();
  17. Person.call(obj, 'bird', 100);
  18. console.log(obj.sayName());

构造函数优缺点

优点:可以将它的实例标识为一种特定类型

缺点:每个方法都要在每个实例上重新创建一遍。当然你也可以这样改:

  1. function Person(name, age){
  2. this.name = name;
  3. this.age = age;
  4. this.sayName = sayName;
  5. }
  6. function sayName(){
  7. return this.name;
  8. }

改为调用全局函数,这样一来毫无封装性可言。。。接下来的原型模式可以弥补这个的不足

原型模式

  1. function Person(){
  2. }
  3. Person.prototype.name = 'Young';
  4. Person.prototype.age = 18;
  5. Person.prototype.sayName = function(){
  6. return this.name;
  7. }
  8. var person1 = new Person();
  9. console.log(person1.sayName());
  10. var person2 = new Person();
  11. console.log(person1.sayName());
  12. alert(person1.sayName === person2.sayName);
  13. //person1和person2访问的是同一组属性的同一个sayName()函数

虽然可以通过对象实例访问保存在原型中的值,但却不能通过实例对象重写原型中的值

  1. function Person(){
  2. }
  3. Person.prototype.name='Young';
  4. Person.prototype.age=18;
  5. Person.prototype.sayName=function(){
  6. return this.name;
  7. }
  8. var person1=new Person();
  9. var person2=new Person();
  10. person1.name='Wind';
  11. console.log(person1.sayName());//Wind
  12. console.log(person2.sayName());//Young
  13. alert(person1.sayName==person2.sayName);//true

在我们调用person1.sayName的时候,会先后执行两次搜索,解析器先确定实例person1是否有sayName的属性,有则调用自己的属性,没有则搜索原型中的属性。

  1. function Person(){
  2. }
  3. Person.prototype.name='Young';
  4. Person.prototype.age=18;
  5. Person.prototype.sayName=function(){
  6. return this.name;
  7. }
  8. var person1=new Person();
  9. var person2=new Person();
  10. person1.name='Wind';
  11. console.log(person1.sayName());//Wind
  12. console.log(person2.sayName());//Young
  13. delete person1.name;
  14. console.log(person1.sayName());//Young
  15. console.log(person2.sayName());//Young

使用hasOwnPropertyType方法可以检测一个属性是存在与原型中还是存在于实例中,该方法是从Object继承来的,实例中为true,原型中为false。

枚举对象上的实例属性用Object.keys()方法

  1. function Person(){
  2. }
  3. Person.prototype.name='Young';
  4. Person.prototype.age=18;
  5. Person.prototype.sayName=function(){
  6. return this.name;
  7. }
  8. var keys=Object.keys(Person.prototype);
  9. console.log(keys);//["name", "age", "sayName"]

原型模式优缺点

优点:不用每个方法都要在每个实例上重申一遍

缺点:很少有人单独使用原型模式地。。问题详列

  1. function Person(){
  2. }
  3. Person.prototype={
  4. constructor:Person,
  5. name:'Young',
  6. age:18,
  7. friends:['Big','Pig'],
  8. sayName:function(){
  9. return this.name;
  10. }
  11. };
  12. var p1=new Person();
  13. var p2=new Person();
  14. p1.friends.push('Mon');
  15. console.log(p1.friends);//["Big", "Pig", "Mon"]
  16. console.log(p2.friends);//["Big", "Pig", "Mon"]

正是因为实例一般都要有自己的属性,而我们这里将他放在了Person.prototype中,所以随着p1的修改,整个实例包括原型都修改了。那么,我们可以组合使用构造函数模式和原型模式。

组合使用构造函数模式和原型模式

  1. function Person(name,age){
  2. this.name=name;
  3. this.age=age;
  4. this.friends=['Big','Pig'];
  5. }
  6. Person.prototype={
  7. sayName:function(){
  8. return this.name;
  9. }
  10. };
  11. var p1=new Person('Young',18);
  12. var p2=new Person('Wind',78);
  13. p1.friends.push('Raganya');
  14. console.log(p1.friends);//["Big", "Pig", "Raganya"]
  15. console.log(p2.friends);//["Big", "Pig"]
  16. console.log(p1.friends==p2.friends);//false
  17. console.log(p1.sayName==p2.sayName);//true

这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。

总结

以上就是关于分析Javascript中创建对象方式的全部内容,通过这篇文章为大家总结的四种方式和其优缺点,希望可以对大家学习使用Javascript能有所帮助。

人气教程排行