最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS创建自定义对象的几种方式

    正文概述 掘金(极致同学)   2020-12-15   489

    JS创建自定义对象的几种方式

    1. 创建一个Object实例

      var person = new Object();
      person.name = "rose";
      person.age = 18;
      person.job = "actor";
      person.sayName = function () {
        console.log(this.name);
      };
      console.log(person); 
      
    2. 对象字面量

      var person = {
        name: "rose",
        age: 18,
        job: "actor",
        sayName: function () {
          console.log(this.name);
        },
      };
      console.log(person);
      

      上面两种方式是创建对象的两种基本方式,他们的原型就是Object

    3. 工厂模式

      function createPerson(name,age,actor){
          var person = new Object();
          person.name = "rose";
          person.age = 18;
          person.job = "actor";
          person.sayName = function () {
            console.log(this.name);
          };
          return person
      }
      console.log(p1 instanceof Object);//true
      console.log(p1 instanceof createPerson);//false
      

      从上面代码中我们可以看出来,工厂模式实际上就是借助函数,内部返回使用第一种方式( new Object())创建的对象。

      优点:可以很方便的创建相似对象。

      缺点:没有解决对象识别的问题,即怎样知道一个对象的类型。

    4. 构造函数方式

      function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function () {
          console.log(this.name);
        };
      }
      var p = new person("rose", 18, "actor");
      console.log(p instanceof Person);//true
      console.log(p instanceof Object);//true
      

      构造函数可以创建特定类型的对象,像Object,Array这样的原生构造函数,在运行时会自动出现在执行环境中。

      构造函数模式与工厂模式的不同之处为:

      1. 没有显式得创建对象,
      2. 直接将属性和方法赋值给了this对象
      3. 没有return语句

      构造函数方式创建对象必须使用new,操作符,会经历下面四个步骤

      1. 创建一个对象
      2. this指向这个新创建的对象
      3. 执行代码
      4. 返回这个对象

    构造函数方式的优点:以构造函数创建的对象,在其原型上都会有一个constructor属性,这个属性指向构造函数Person而这个属性最初是用来标识数据类型的。

    忧化

    function Person(name, age, job) {
      this.name = name;
      this.age = age;
      this.job = job;
      this.sayName = sayName;
    }
    function sayName(){
        console.log(this.name);
    }
    var p = new person("rose", 18, "actor");
    

    缺点:当对象需要很多方法的时候,就会定义多个全局作用域下的函数,这样一来,不仅毫无封装性可言,而且让全局作用域下的函数过多。

    1. 原型模式

      function Person() {}
      Person.prototype.name = "rose";
      Person.prototype.age = 18;
      Person.prototype.sayName = function () {
        console.log(this.name);
      };
      var p = new Person();
      console.log(p);
         
      

      说到原型对象就要说一下原型链,原型与原型链对象如下图所示:

    JS创建自定义对象的几种方式

    我们可以看到,在prototype上面定义的所有属性都是在其原型对象上。在原型对象上的属性与方法属于公有属性和公有方法。其所有实例都可以访问到。

    1. **组合使用构造函数模式和原型模式 ** 最常用

      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.sayName = function () {
        console.log(this.name);
      };
      var p = new Person("rose", 18);
      console.log(p);
      

    JS创建自定义对象的几种方式

    对象在引用其属性的时候,会按照原型链去查找,直到查找到Object的原型。


    起源地下载网 » JS创建自定义对象的几种方式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元