javascript创建对象方式

newsning 发布于2019-08-21 14:17 / 1106人阅读

摘要：枚举对象上的实例属性用方法原型模式优缺点优点不用每个方法都要在每个实例上重申一遍缺点很少有人多带带使用原型模式地。。组合使用构造函数模式和原型模式这种模式是目前使用最广泛认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。

javascript创建对象方式

工厂模式

构造函数模式

原型模式

工厂模式

    function createPerson(name, age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj; //一定要返回，否则打印undefined:undefined
    }
    var person1 = new createPerson("Young",18);
    console.log(person1.name + ":" + person1.age);

优点：工厂模式可以解决创建多个相似对象

缺点：没有解决对象识别问题（怎样确定一个对象的类型）

学习判断对象类型： http://www.cnblogs.com/flyjs/...

构造函数模式

    function Person(name,age){
      this.name = name;
      this.age = age;
    }
    var person1 = new Person("Young",18);
    console.log(person1.name + ":" + person1.age);

在说优缺点之前，先来说说她本身的一点小故事吧

将构造函数当做函数使用

    function Person(name,age){
      this.name=name;
      this.age=age;
      this.sayName=function(){
        return this.name;
      }
    }
    
    //当做构造函数使用
    var person1 = new Person("Young", 18);
    person1.sayName();
    console.log(person1.name + ":" + person1.age);
    
    //当做普通函数调用
    Person("Wind", 18);
    console.log(window.sayName());
    
    //在另一个作用域中调用
    var obj = new Object();
    Person.call(obj, "bird", 100);
    console.log(obj.sayName());

构造函数优缺点

优点：可以将它的实例标识为一种特定类型

缺点：每个方法都要在每个实例上重新创建一遍。当然你也可以这样改：

    function Person(name, age){
      this.name = name;
      this.age = age;
      this.sayName = sayName;
    }
    function sayName(){
      return this.name;
    }

改为调用全局函数，这样一来毫无封装性可言。。。接下来的原型模式可以弥补这个的不足

原型模式

    function Person(){
      
    }
    Person.prototype.name = "Young";
    Person.prototype.age = 18;
    Person.prototype.sayName = function(){
      return this.name;
    }
    
    var person1 = new Person();
    console.log(person1.sayName());
    var person2 = new Person();
    console.log(person1.sayName());
    alert(person1.sayName === person2.sayName);
    //person1和person2访问的是同一组属性的同一个sayName()函数

虽然可以通过对象实例访问保存在原型中的值，但却不能通过实例对象重写原型中的值

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var person1=new Person();
    var person2=new Person();
    person1.name="Wind";
    
    console.log(person1.sayName());//Wind
    console.log(person2.sayName());//Young
    alert(person1.sayName==person2.sayName);//true

在我们调用person1.sayName的时候，会先后执行两次搜索，解析器先确定实例person1是否有sayName的属性，有则调用自己的属性，没有则搜索原型中的属性。

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var person1=new Person();
    var person2=new Person();
    
    person1.name="Wind";
    console.log(person1.sayName());//Wind
    console.log(person2.sayName());//Young
    
    delete person1.name;
    console.log(person1.sayName());//Young
    console.log(person2.sayName());//Young

使用hasOwnPropertyType方法可以检测一个属性是存在与原型中还是存在于实例中，该方法是从Object继承来的，实例中为true，原型中为false。

枚举对象上的实例属性用Object.keys()方法

    function Person(){
      
    }
    Person.prototype.name="Young";
    Person.prototype.age=18;
    Person.prototype.sayName=function(){
      return this.name;
    }
    
    var keys=Object.keys(Person.prototype);
    console.log(keys);//["name", "age", "sayName"]

原型模式优缺点

优点：不用每个方法都要在每个实例上重申一遍

缺点：很少有人多带带使用原型模式地。。问题详列

    function Person(){
      
    }
    Person.prototype={
      constructor:Person,
      name:"Young",
      age:18,
      friends:["Big","Pig"],
      sayName:function(){
      return this.name;
      }
    };
    var p1=new Person();
    var p2=new Person();
    p1.friends.push("Mon");
    console.log(p1.friends);//["Big", "Pig", "Mon"]
    console.log(p2.friends);//["Big", "Pig", "Mon"]

正是因为实例一般都要有自己的属性，而我们这里将他放在了Person.prototype中，所以随着p1的修改，整个实例包括原型都修改了。那么，我们可以组合使用构造函数模式和原型模式。

组合使用构造函数模式和原型模式

    function Person(name,age){
      this.name=name;
      this.age=age;
      this.friends=["Big","Pig"];
    }
    Person.prototype={
      sayName:function(){
      return this.name;
      }
    };
    var p1=new Person("Young",18);
    var p2=new Person("Wind",78);
    p1.friends.push("Raganya");
    console.log(p1.friends);//["Big", "Pig", "Raganya"]
    console.log(p2.friends);//["Big", "Pig"]
    console.log(p1.friends==p2.friends);//false
    console.log(p1.sayName==p2.sayName);//true

这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。

GPU云服务器云服务器 js创建对象方式 java创建对象的几种方式电脑创建快捷方式对象声明方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87854.html

白话解释 Javascript 原型继承(prototype inheritance)

摘要：我们有了构造函数之后，第二步开始使用它构造一个函数。来个例子这种方式很简单也很直接，你在构造函数的原型上定义方法，那么用该构造函数实例化出来的对象都可以通过原型继承链访问到定义在构造函数原型上的方法。来源: 个人博客白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过面向对象的同学们是否还记得，老师整天挂在嘴边的面向对象三大特...

kid143 2019-08-21 15:09 评论0 收藏0
JavaScript学习笔记(二) 对象与函数

摘要：在中函数是一等对象，它们不被声明为任何东西的一部分，而所引用的对象称为函数上下文并不是由声明函数的方式决定的，而是由调用函数的方式决定的。更为准确的表述应该为当对象充当函数的调用函数上下文时，函数就充当了对象的方法。引言：当理解了对象和函数的基本概念，你可能会发现，在JavaScript中有很多原以为理所当然（或盲目接受）的事情开始变得更有意义了。 1.JavaScript...

jeffrey_up 2019-08-21 10:23 评论0 收藏0
JavaScript对象

摘要：对象的分类内置对象原生对象就是语言预定义的对象，在标准定义，有解释器引擎提供具体实现宿主对象指的是运行环境提供的对象。不过类型是中所有类型的父级所有类型的对象都可以使用的属性和方法，可以通过的构造函数来创建自定义对象。对象 javaScript中的对象，和其它编程语言中的对象一样，可以比照现实生活中的对象来理解。在JavaScript中，一个对象可以是一个单独拥有属性和类型的实体。和...

xavier 2019-08-23 11:01 评论0 收藏0
JavaScript中的面向对象（object-oriented）编程

摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。最近工作一直在用nodejs做开发，有了nodejs，...

JerryZou 2019-08-21 10:26 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
JavaScript基础之创建对象、原型、原型对象、原型链

摘要：在最开始的时候，原型对象的设计主要是为了获取对象的构造函数。同理数组通过调用函数通过调用原型链中描述了原型链的概念，并将原型链作为实现继承的主要方法。对象的创建在JavaScript中创建一个对象有三种方式。可以通过对象直接量、关键字new和Object.create()函数来创建对象。 1. 对象直接量创建对象最直接的方式就是在JavaScript代码中使用对象直接量。在ES5...

wangbjun 2019-08-22 15:16 评论0 收藏0