首页  >  文章  >  web前端  >  实例解说JavaScript创建对象的四种方式

实例解说JavaScript创建对象的四种方式

灭绝师太
灭绝师太原创
2021-10-27 18:02:091916浏览

        JavaScript简称JS,JS最初的目的是解决用户和服务器之间的交互问题。需要注意的是JS不是一门面向对象的语言,而是基于对象,模拟面向对象的语言。那么如何创建JavaScript对象呢?

         对象: 特指自然世界中的某个事物 , 具有一些特征(属性)和行为(方法),比如姚明这个对象有姓名,性别,身高,球号,球队等等这些特征,并且会运球,投篮,跑步,吃饭等这些行为,那我们如何使用js创建对象呢?

           第一种:字面量的方式创建实例对象

    var YaoMing = {
        name:"YaoMing",
        age:36,
        gender:"男",
        eat:function(){
            console.log('吃臭豆腐');
        },
        read:(){
            console.log('疯子在左天才在右');
        }
    }

            



        第二种:调用系统构造函数创建对象

    var per2=new Object();
     per2.name="大蛇丸";
     per2.age=30;
     per2.sex="男";
     per2.eat=function () {
     console.log("吃榴莲");
     };
     per2.play=function () {
     console.log("这个小蛇真好玩");
     };

            这时候检测per2是否是Object的实例,返回true

        20211028152133.png

       


      

           第三种:自定义构造函数创建对象

        function Person(name, age, gender) {
              this.name = name;
              this.age = age;
              this.gender = gender;
              this.play = function () {
                console.log("天天打游戏");
              };
         }
         var per = new Person("雏田", 18, "女");
         console.log(per instanceof Person);//返回true

        
        QQ截图20211028153114.png

        


        现在思考第三种自定义构造函数创建对象,其内部实现过程是怎样的??

        拿上面的例子来说,创建对象 var per = new Person("雏田", 18, "女");  实例化一个对象的同时对属性age,name,gender也完成了初始化赋值。内部过程如下  : 

        * 1.开辟空间存储对象

        * 2.把this设置为当前的对象

        * 3.设置属性和方法的值

        * 4.把this对象返回


          第四种:工厂模式创建对象

           

<script>
   //工厂模式创建对象 
    function createObject(name,age) {
      var obj=new Object();
      obj.name=name;
      obj.age=age;
      obj.sayHi=function () {
        console.log("您好");
      };
      return obj;
    }
    //自定义构造函数创建对象
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("您好");
      };
    }
    
 </script>

        

        工厂模式创建对象 : var per1=createObject("小明",20);

      自定义构造函数创建对象 :var per2=new Person("小红",20);

      通过对比以上两种创建对象的方式,我们可以得出以下结论:

        工厂模式创建对象   

        1.函数名小写,2.函数内部使用new关键字,3.并且有返回值,4.new之后的对象是当前的对象,5.直接调用函数就可以创建对象。

        自定义构造函数创建对象 

       1.函数名首字母大写,2.函数内部没有使用new关键字,3.没有返回值,4.this代表当前的对象,5.通过new的方式创建对象。

    


以上是实例解说JavaScript创建对象的四种方式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn