zoukankan      html  css  js  c++  java
  • JS创建对象的几种方式整理

    javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?

    一:通过“字面量”方式创建对象

    方法:将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象

    列如:

    var person={"name":"abc","age":22,work:function(){console.loh(1)}}

    如果{ }中为空,则将创建一个空对象:

    var person={}

    演示代码:

    <script>
    
      var person={
         name:"wqc",
         age:22,
        intro:function(){console.log(1)}
    };
    
     person.intro();
    </script>
     我们还可以给对象丰富成员信息。
      对象.成员名称 = 值;
      对象[成员名称] = 值;
    也可以获取对象的成员信息。
      对象.成员名称;
      对象[成员名称];
    丰富成员信息:
    <script>
    
    var person={
         name:"wqc",
         age:22,
         intro:function(){
             console.log(1);
        }
        
     }
    person.class=22;//丰富成员变量
    </script>

    二、通过“构造函数”方式创建

    方法:

    var person=new 函数名();

    比如:var person=new object();

    <script>
        function person(){
            this.name="xiaoming";
            this.age=22;
            this.intro=function(){
                console.log(2)
            }
        }
        var per=new person();
        per.intro();
    </script>

    三、通过object方式创建。

    var obj=new Object()

    方法:先通过object构造器new一个对象,再往里丰富成员信息。

     <script type="text/javascript">
    2 var person = new Object();
    3 person.name = "dongjc";
    4 person.age = 32;
    5 person.Introduce = function () {
    6         alert("My name is " + this.name + ".I'm " + this.age);
    7     };
    8 person.Introduce();
    9 </script>
    

     第五种:原型创建对象模式 

    function Person(){}
    Person.prototype.name = 'Nike';
    Person.prototype.age = 20;
    Person.prototype.jbo = 'teacher';
    Person.prototype.sayName = function(){
     alert(this.name);
    };
    var person1 = new Person();
    person1.sayName();

    使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。

    第六种:使用工厂模式创建对象

    function createPerson(name,age,job){
     var o = new Object();
     o.name = name;
     o.age = age;
     o.job = job;
     o.sayName = function(){
      alert(this.name); 
     };
     return o; 
    }
    var person1 = createPerson('Nike',29,'teacher');
    var person2 = createPerson('Arvin',20,'student');

    在使用工厂模式创建对象的时候,我们都可以注意到,在createPerson函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第二种创建对象的模式。

    第七种:组合使用构造函数模式和原型模式

    function Person(name,age,job){
     this.name =name;
     this.age = age;
     this.job = job;
    }
    Person.prototype = {
     constructor:Person,
     sayName: function(){
     alert(this.name);
     };
    }
    var person1 = new Person('Nike',20,'teacher');
  • 相关阅读:
    最好用的html复制插件——Clipboard.js
    最好用的轮播插件——Swiper.js
    媒体查询
    函数防抖和节流
    JQ增删改查localStorage实现搜索历史功能
    vscode如何设置html模板
    js中innerHTML、outerHTML、innerText、outerText的区别
    JS实现一个简单的网页钟表
    Sql Server 2014完全卸载
    照片尺寸大小怎样换算?
  • 原文地址:https://www.cnblogs.com/wanqingcui/p/9557715.html
Copyright © 2011-2022 走看看