美文网首页
js 创建对象

js 创建对象

作者: 吹牛大使者 | 来源:发表于2020-03-04 21:43 被阅读0次

写这篇文章主要是给自己理清思路。
原文链接:https://www.w3school.com.cn/js/pro_js_object_defining.asp

1. js 支持动态给对象添加属性,所以最原始的方法就是创建一个对象之后,给对象添加属性

var car = new Object();
car.color = "red";
car.doors = 4;
car.travel = function(){
            alert("dive car")
}

但是这样会有问题:
第一,代码的可读性不强
第二,如果想要创建许多个相同的对象,就会显得很麻烦。比如,我想创建一个和上面一样的car,也拥有相同的属性。那么,按照最原始的方法,就只能这样创建:

var car1 = new Object();
car1.color = "red";
car1.doors = 4;

2. 为了解决上述创建对象的问题,就有了创建对象的工厂方法

function Car(){
          let car = new Object;
          car.color = "blue";
          car.doors = 4;
          car.travel = function(){
             alert("dive car")
          }
          return car2 ;
}

现在创建对象就非常简单了,只需要调用Car()即可

var car2 = Car( ) ;  

但是,这样创建对象仍然有问题:

  1. 所有通过调用Car()创建出来的对象,属性值都是一样的。
  2. 没有用new来创建对象,使得代码的可读性降低
  3. 对所有的对象,都会创建一样的函数,造成资源浪费

3.针对上述这些问题,对构造函数进行改进。

function Car(color,doors){
       let car = new Object;
        car.color = color;
        car.doors = doors;
        car.travel = function(){
            alert("car dive to lake")
        }
        return car;
}

这样,创建不同的对象可以有不同的属性值。

var car3 = Car("green",4)

但是这样还是不够的

4.继续解决没有用new来创建对象的问题

function Car(color,doors){
        this.color = color;
        this.doors = doors;
        this.travel = function(){
                   alert("car dive to lake")
        }
}

通过使用this,省去了在函数内部创建并return的代码,创建对象时通过new,加强的代码的可读性。但是每次创建对象的时候,都会创建相同的函数的问题还是没有解决.

5.为了解决函数重复创建的问题,我们通过prototype来添加函数,这样就只用创建一次函数,所有的实例对象都可以调用。

function Car(color,doors){
            this.color = color;
            this.doors = doors;
}
Car.prototype.travel = function(){
            alert("car dive to lake")
}

但是这样还是有问题,因为我们是在构造函数外创建的travel()函数。在构造函数内部定义属性,在其外部定义方法的做法不合逻辑。

6.对上面的代码进行改进,这样属性和方法就都在构造函数里了。

function Car(color,doors){
            this.color = color;
            this.doors = doors;
            if (typeof Car._initalized == "undefined") {
                        Car.prototype.travel = function(){
                                    alert("car dive to lake")
                        }
            }
            Car._initalized = true ;

}

相关文章

  • JS对象

    JS 创建对象 批量创建对象

  • 6.JavaScript中

    JS对象创建: JS通过构造函数创建对象: JS内置对象window: 所有的全局变量都是window的属性 所有...

  • JS笔记-006-JS对象-数字-字符串-日期-数组-逻辑

    JS对象 创建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象。 创建新对象有...

  • 面向对象案例:随机方块

    1.创建画布 2.创建工具对象--tools.js 3.创建box盒子对象--box.js 3.1创建构造函数 3...

  • JS创建对象

    一、基本方法 1.字面量:var o = {}; 2.构造函数:var o = new Object(); 二...

  • JS创建对象

    工厂模式 由于在ECMAScript无法创建类,所以用函数的封装以特定接口创建对象 问题:解决了创建多个相似对象的...

  • js 创建对象

    创建对象的几种方法 方法一:new Object() 方法二:{} 方法三:function xx() 为对象中添...

  • js创建对象

    this指针构造器创建 工厂模式 new 出来 prototype变量赋值 :为属性赋值链接

  • js创建对象

    新博客地址:http://gengliming.com 参考《javascript 高级程序设计(第3版)》 1、...

  • JS—创建对象

    创建object实例的方式有两种: 使用new操作符,后面跟object构造函数。 使用对象字面量表示法。 分别复...

网友评论

      本文标题:js 创建对象

      本文链接:https://www.haomeiwen.com/subject/ixgilhtx.html