在Js中创建对象的几种方式

willin 发布于2019-08-21 11:43 / 3525人阅读

摘要：对象字面量的方式今年创建实例的发明者我是今年属性是可以动态添加，修改的构造函数无参构造函数有参构造函数我叫，今年岁实例化创建对象调用方法由于指针在对象实例的时候发生改变指向新的实例。是我的名字混合方式构造函数原型我是，今年

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；方法很多，也能混合使用。

对象字面量的方式：

var person={
    name:"SF",
    age:25
    say:function(){
       alert(this.name+"今年"+this.age);
    }
};
person.say();

创建Object实例：

var my = new Object();
my.name = "SF"; //JavaScript的发明者
my.age = 25;
my.say = function() { 
  alert("我是"+this.name+"今年"+my.age);
}
my.say();

*属性是可以动态添加，修改的

构造函数

无参构造函数

function Person(){}
var person = new Person(); 
person.name = "SF";
person.age = "25";
person.say = function() {
   alert("My name is " + person.name);
}
person.say();

有参构造函数

function Person(name,age) { 
  this.name = name; 
  this.age = age; 
  this.say = function() { 
      alert("我叫" + this.name + "，今年" + this.age + "岁); 
  }
}
var my = new Person("SF",25); //实例化、创建对象
my.say(); //调用say()方法

由于this指针在对象实例的时候发生改变指向新的实例。这时新实例的方法也要重新创建，如果n个实例就要n次重建相同的方法。

工厂模式

function creatPerson(name,age){
   var person = new Object();
   person.name=name;
   person.age=age;
   person.say=function(){
   alert(this.name+"今年"+this.age+"岁");
  };
  return person;
 };
 var my = creatPerson("SF",25);//实例化
 my.say();//调用

原型方式

function Person(name,age){}
Person.prototype.name = "SF";
Person.prototype.age = 25;
Person.prototype.say = function() { 
  alert(this.name+"是我的名字");
}
var my = new Person();
my.say();

让我们先了解下原型：

首先，每个函数都有一个prototype(原型)属性，这个指针指向的就是Person.prototype对象。而这个原型对象在默认的时候有一个属性constructor，指向Person，这个属性可读可写。而当我们在实例化一个对象的时候，实例my除了具有构造函数定义的属性和方法外（注意，只是构造函数中的）,还有一个指向构造函数的原型的指针，ECMAScript中叫[[prototype]]，这样实例化对象的时候，原型对象的方法并没有在某个具体的实例中，因为原型没有被实例。所以这种模式定义的对象，在调用方法的时候过程：调用my.say();先看实例中有没有，有调之，无追踪到原型，有调之，无出错，调用失败。


  
上面代码等同

function Person(name,age){}
Person.prototype={
    constructor:Person,   //必须手动设置这个属性，否则没有实例共享原型的意义了。
    name:"SF",
    age:25,
    say:function(){
        alert(this.name+"是我的名字");
    }
}
var my = new Person();
my.say();

混合方式（构造函数+原型）

function Person(name,age) {
   this.name = name;
   this.age = age;
}
Person.prototype.say = function() { 
  alert("我是"+this.name+"，今年"+this.age);
}
var my = new Person("SF","25");
my.say();

GPU云服务器云服务器 java创建对象的几种方式 js继承的几种方式服务器请求的几种方式 js的几种数据类型

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

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

JS中创建对象的几种设计模式

摘要：构造函数模式定义构造函数模式是语言创建对象的通用方式。但两种语言用构造函数创建对象的方式略有不同在中没有类的概念，函数即为一等公民，因此，不必显式声明某个类，直接创建构造函数即可，类的方法和属性在构造函数中或原型对象上处理。工厂模式定义：工厂模式非常直观，将创建对象的过程抽象为一个函数，用函数封装以特定接口创建对象的细节。通俗地讲，工厂模式就是将创建对象的语句放在一个函数里，通...

Galence 2019-08-23 15:34 评论0 收藏0
JS中创建函数的几种方式

使用函数声明创建函数语法： * function 函数名([形参1,形参2...形参N]){ * 语句... * } */ function fun2(){ console.log(这是我的第二个函数~~...

Joyven 2019-08-23 14:52 评论0 收藏0
js 创建对象的几种方式

摘要：可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象构造函数模式原型模式组合使用构造函数模式和原型模式创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。 JS中创建对象的主要模式有工厂模式工厂模式抽象了具体创建对象的过程例如 function createPerson(name, age, job){ var o = new Object(...

seanlook 2019-08-22 14:03 评论0 收藏0
文件上传的几种方法——webuploader篇

摘要：本来想把这几种方法放在同一篇写的，写完，已经很长了，想想还是分开的比较好。是由团队开发的一个简单的以为主为辅的现代文件上传组件。因为是，就拿着的来用一下选择文件的按钮。也可以重写上传事件。如果不自动上传的话，可以通过触发。本来想把这几种方法放在同一篇写的，写完xhr，已经很长了，想想还是分开的比较好。webuploader是由Baidu WebFE(FEX)团队开发的一个简单的以HT...

Amos 2019-08-20 16:49 评论0 收藏0
JavaScript的几种循环方式

摘要：本教程解释了现代中各种各样的循环可能性目录介绍提供了许多迭代循环的方法。引入了循环，它结合了的简洁性和破解能力注意使用。此循环在每次迭代中创建一个新范围，因此我们可以安全地使用它而不是。 JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性 showImg(https://segmentfault.com/img/bVbfH...

Allen 2019-08-29 16:28 评论0 收藏0