美文网首页
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 创建对象

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