JavaScript如何创建一个对象

最新推荐文章于 2023-06-10 18:25:15 发布
最新推荐文章于 2023-06-10 18:25:15 发布
阅读量1.3w 收藏 18
点赞数 7
分类专栏： JavaScript 文章标签： javascript 对象 创建对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010297791/article/details/55670841
版权

       我们可以利用JavaScript的语法特征，以类的思想来创建对象。

方法一：原始方法

代码如下：

<script>
    var obj = new Object();
    obj.name = "Kitty";//为对象增加属性
    obj.age = 21;
    obj.showName = function () {//为对象添加方法
        console.log(this.name);
    };
    obj.showAge = function(){
        console.log(this.age);
    };
    obj.showName();
    obj.showAge();
</script>

      这种方法通过new关键字生成一个对象，然后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。其中的this表示调用该方法的对象。

      这种方法的问题在于：如果我们需要多次创建对象，那么就需要重复代码多次，不利于代码的复用。

方法二：工厂方法

代码如下：

<script>
    function createObj(){
        var obj = new Object();//创建对象
        obj.name = "Kitty";
        obj.age = "21";
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function () {
            console.log(this.age);
        };
        return obj;
    }

    var obj1 = createObj();
    var obj2 = createObj();

    obj1.showName();
    obj1.showAge();

    obj2.showName();
    obj2.showAge();
</script>
       这种方法虽然也实现了创建对象，但是同样地，如果需要多次创建对象，而且属性内容不一样的话，也是需要重复代码多遍。需要重新考虑代码重用率，接下来修改代码，使其可以提高代码重复率，而且可以改变工厂方法，传入参数赋值。

改进代码如下：

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function(){
            console.log(this.age);
        };

        return obj;
    }

    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>
      这种方法虽然可以提高代码的重用率，但和面向对象中类的概念相比，有一个很大的缺陷。面向对象强调对象的属性私有，但对象的方法是共享。而上面的工厂方法在创建对象时，要为每个对象创建各自私有的方法。同时，由于为每个对象都创建逻辑相同的方法，所以很浪费内存。

改进代码如下：

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = showName;
        obj.showAge = showAge;
        return obj;
    }

    function showName(){
        console.log(this.name);
    }
    function showAge(){
        console.log(this.age);
    }
    
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>
      上面通过定义几个函数对象，解决了不同对象持有函数对象的私有问题。现在所有对象的方法都持有上面两个函数的引用。但是这么一来，对象的函数和对象又相互独立，这和面向对象中特定方法属于特定类的思想不符合。

方法三：构造函数方法

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;

        this.showName = function () {
            console.log(this.name);
        };
        this.showAge = function () {
            console.log(this.age);
        };
    }
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>

     构造函数的方法和工厂方法一样，会为每个对象创建独享的函数对象。当然也可以将这些函数对象定义在构造函数外面，这样有了对象和方法相互独立的问题。

     使用构造函数存在的最大问题就是每个实例都会将所有的属性创建一次。这个对于数值属性来说可以接受，但是如果函数方法每个实例都要创建一遍，则不合理。

      要创建Person()的新实例，必须使用new操作符。以这种方式调用构造函数实际上会经历以下四个步骤：

  •  创建一个新对象；
  • 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
  • 执行构造函数中的代码（为这个新对象添加属性）；
  • 返回新对象。

方法四：原型方法    

代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.name = "Kitty";
    Person.prototype.age = 21;
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showAge = function (){
        console.log(this.age);
    };

    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>
      当生成Person对象时，prototype的属性都赋给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题。

修改代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.age = 21;
    Person.prototype.array = new Array("Kitty","luo");

    Person.prototype.showAge = function (){
        console.log(this.age);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person();
    var obj2 = new Person();
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素

    obj1.showArray();//Kitty,luo,Wendy
    obj2.showArray();//Kitty,luo,Wendy
</script>
     上面的代码通过obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型方法定义对象的方法，这样就可以做到属性私有，而方法共享。

方法五：混合的构造函数/原型方式

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
    }

    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素

    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

      属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

方法六：动态原型方法

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法
        if(typeof Person._initialized  == "undefined"){
            Person.prototype.showName = function () {
                console.log(this.name);
            };
            Person.prototype.showArray = function () {
                console.log(this.array);
            };
            Person._initialized = true;
        }
    }

    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素

    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

      这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。


Wendy-lxq
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript创建一个object对象并操作对象属性的用法
10-24
主要介绍了JavaScript创建一个object对象并操作对象属性的用法,实例分析了javascript使用object类定义对象及属性的用法,需要的朋友可以参考下
JS创建对象的三种方法（转）
Lucky小黄人的博客
02-22 638
转自：JS创建对象的三种方法 在JavaScript中，对象是一组无序的相关属性和方法的集合。所有的实物都是对象，例如，字符串、数值、数组、函数等。 下面我会介绍三种创建对象的方法。 一、通过字面量创建对象 其语法格式如下： var 对象名 = {}; // 创建了一个空对象 var 对象名 = { 属性名: 属性值, // 创建了一个属性 方法名: function () { // 创建...
JavaScript创建对象的语法
沧海一粟
12-16 1718
JavaScript对象 1，对象的创建   1）对象初始化器方式 格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN} property是对象的属性 value则是对象的值，值可以是字符串、数字或对象三者之一 例如： var user={name:“user1”,age:18}；
JS创建对象的三种方法
phx2417514299的博客
05-30 9032
在JavaScript中，对象是一组无序的相关属性和方法的集合。所有的实物都是对象，例如，字符串、数值、数组、函数等。 下面我会介绍三种创建对象的方法。 一、通过字面量创建对象 其语法格式如下： var 对象名 = {}; // 创建了一个空对象 var 对象名 = { 属性名: 属性值, // 创建了一个属性 方法名: function () { // 创建了一个方法 } } 注意点： 属性名和方法名后面跟的是冒号。 多个属性和方法之间要用逗号隔开。 例如， var obj1 = {}; /
js中创建对象的5种方法
jiangjunyuan168的博客
09-17 1万+
与object构造函数模式类似，通过自定义一个构造函数，再进行new操作创建对象需要创建多个类型确定的对象。每个对象都有相同的数据，浪费内存。
js对象定义的3种方法
xiaoweids的博客
06-10 1万+
转自：微点阅读 https://www.weidianyuedu.com方法一：通过var object={} 对象字面量(1)，可以叫对象直接量来自定义一个对象。对象自面量是一个表达式，这个表达式的每次运算都创建并初始化一个新对象。var user = { x:1,y:2,z:3,pp:function(){ alert("22222222") }}//用字面量定义一个对象，是以名值对的方式来保存的alert(user.y) //调用属性user.pp() //调用方法(2) var s
JavaScript 创建对象
10-29
JSON方式/对象直接量 等多种方法。大家可以快速的掌握js对象的建立。
JavaScript创建对象的写法
10-26
JavaScript 有Date、Array、String等这样的内置对象，功能强大使用简单，人见人爱，但在处理一些复杂的逻辑的时候，内置对象就很无力了，往往需要开发者自定义对象
JavaScript对象创建模式实例汇总
10-21
主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
js创建对象的三种方法
qq_73599840的博客
12-04 1540
在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
创建对象的5种方式
weixin_41255211的博客
03-21 1万+
省时总结： new关键字 Class.newInstance Constructor.newInstance Clone方法 反序列化 创建对象的5种方式 1、new关键字 这是我们最常见的创建对象的方式，通过这种方式我们还可以调用任意的构造器（无参的和有参的）。 public class Main { public static void main(String[] args) { Person person1 = new Person(); Person pe
JS的8种创建对象的方法
qq_48701993的博客
08-18 3454
JS的8种创建对象的方法
js中创建对象的几种常用方式
最新发布
m0_58571759的博客
06-10 1208
通过构造函数的方式创建对象，对象和类型之间建立了联系，但是构造函数存在的一个缺点就是造成了不必要的函数对象的创建，因为在js中函数也是一个对象，因此如果对象属性中包含函数的话，那么每次创建对象就会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有创建实例对象所通用的。一个是没有办法通过传入参数来初始化值，另一个就是因为是所有实例对象所共有的，那么当原型上的属性的属性值是引用类型数据（例如数组），那么一个实例对数据的改变会影响到所有的实例对象。字面量这种方式创建大量相似对象时，会产生大量重复代码。
js 创建对象、属性、方法
热门推荐
ls510671759的专栏
05-11 2万+
1，自定义对象。 根据JS的对象扩展机制，用户可以自定义JS对象，这与Java语言有类似的地方。 与自定义对象相对应的是JS标准对象，例如Date、Array、Math等等。 2，原型（prototype） 在JS中，这是一种创建对象属性和方法的方式，通过prototype可以为对象添加新的属性和方法。 通过prototype我们可以为JS标准对象添加新的属性和方法，例如对于String对象，我们可以为其添加一个新的方法trim（）。 与严格的编程语言（例如Java）不同，我们可以在运行期间为JS对象动态添
JavaScript创建对象的4种方法
dearzhuoer的博客
11-28 1万+
JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是，对象是有特征和行为的，是具体特指的某一个事物。使用对象可以使程序更加整洁 通过Object()方法来创建 Object()是JavaScript内部的对象，使用Object创建对象的语法： 我们通过Object创建的一个Dog对象，这个对象有name,color,eat属性；并且给这个对象定义了两个方法，因此我们...
js 的对象--如何定义一个对象
weixin_30662539的博客
02-11 611
通过var object={} 对象字面量，可以叫对象直接量来自定义一个对象 对象自面量是一个表达式，这个表达式的每次运算都创建并初始化一个新对象。每次计算对象字面量的时候，也都会计算他的每个属性值。也眩光是说，如果在一个重复调用的函数中的循环体内使用了对象的直接量，它将创建很多新对象，并且每次创建的对象的属性值也有可能不同。 演示代码： 1 <script> 2 ...
029-Web前端-JS-对象和函数
快要脑溢血的LEE
06-11 306
对象和函数 #6.11 第二篇 Javascript函数 & Javascript对象 1.Javascript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 语法： function 函数名(参数1，参数2...){ 函数体; } 注意： a.函数可以没有参数 b.函数名的命名规则符合变量的命名规则即可 c.函数体允许有多句，它是函数在执行时执行的代码 d.函数在制作时有几...
javascript 创建一个JSON串
06-07
在上面的代码中，我们首先创建了一个名为 `myObj` 的 JavaScript 对象，该对象包含三个属性：`name`、`age` 和 `city`。接下来，我们使用 `JSON.stringify()` 方法将该对象转换为字符串格式的 JSON 数据，并将其存储...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值