javascript系列之构造对象

psychola 发布于2019-08-22 15:50 / 2483人阅读

摘要：构造函数模式使用操作符后跟构造函数隐式原型指向由构造函数构造出来指向由函数构造使用对象字面量表示法还支持对象和数组字面量，允许使用一种简洁而可读的记法来创建数组和对象。通过同一个构造函数创建出来的对象，共享同一个原型对象。

构造函数模式

1.使用new操作符后跟Object构造函数

var  person = new Object();
person.name = "kitty";
person.age = 25;

person.__proto__(隐式原型)指向Object.prototype.

2.由构造函数构造出来

function Car(sColor,iDoors,iMpg) {
　　　this.color = sColor;
　　　this.doors = iDoors;
　　　this.mpg = iMpg;
　　　this.showColor = function() {
　　　　　　alert(this.color);
　　　};
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

person.__proto__指向Car.prototype.
3.由函数Object.create构造

var person1 = {
    name: "cyl",
    sex: "male"
};

var person2 = Object.create(person1);

使用“对象字面量”表示法

JavaScript还支持对象和数组字面量，允许使用一种简洁而可读的记法来创建数组和对象。

var person = {
    name : "kitty",
    age:25
};

工厂模式

function createCar(sColor,iDoors,iMpg) {
  　　var oTempCar = new Object;
  　　oTempCar.color = sColor;
 　　 oTempCar.doors = iDoors;
  　　oTempCar.mpg = iMpg;
  　　oTempCar.showColor = function() {
    　　　　alert(this.color);
　　　 };

  　　return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();      //输出 "red"
oCar2.showColor();      //输出 "blue"

前面的例子中，每次调用函数 createCar()，都要创建新函数 showColor()，意味着每个对象都有自己的 showColor() 版本。而事实上，每个对象都共享同一个函数。javascript中没有什么static和成员变量之分，如果想在对象之间共享数据或方法，只能借助原型对象，将共享的变量和方法都放在原型对象中。

原型方式

function Car() {}
　　Car.prototype.color = "blue";
　　Car.prototype.doors = 4;
　　Car.prototype.mpg = 25;
　　Car.prototype.drivers = new Array("Mike","John");
　　Car.prototype.showColor = function() {
       alert(this.color);
  　}
};

var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Bill");

alert(oCar1.drivers);  //输出 "Mike,John,Bill"
alert(oCar2.drivers);  //输出 "Mike,John,Bill"

混合的构造函数/原型方式(相对完美的解决方式)

联合使用构造函数和原型方式，就可像用其他程序设计语言一样创建对象。这种概念非常简单，即用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。结果是，所有函数都只创建一次，而每个对象都具有自己的对象属性实例。

function Car(sColor,iDoors,iMpg) {
  　　this.color = sColor;
  　　this.doors = iDoors;
 　　 this.mpg = iMpg;
  　　this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
 　　 alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.drivers.push("Bill"); 

alert(oCar1.drivers);  //输出 "Mike,John,Bill"
alert(oCar2.drivers);  //输出 "Mike,John"

JS的构造函数都有一个prototype属性，指向它的原型对象（其实就是个普通的JS对象）。通过同一个构造函数创建出来的对象，共享同一个原型对象。原型对象初始化的时候是空的，我们可以在里面自定义任何属性和方法，这些方法和属性都将被该构造函数所创建的对象继承。如果原型发生了变化，那么所有实例都会跟着改变。

GPU云服务器云服务器系列之系列之二架构之坑系列 javascript专题系列

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

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

JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0
JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
JavaScript系列 - 深入之从原型到原型链

摘要：本文详情构造函数创建对象先使用构造函数创建一个对象在这个例子中，就是一个构造函数，我们使用创建了一个实例对象。本文详情：https://github.com/mqyqingfen... 构造函数创建对象先使用构造函数创建一个对象 function Person(){ } var person = new Person(); person.name = Mit; console.lo...

shadajin 2019-08-26 12:01 评论0 收藏0
JavaScript深入之创建对象的多种方式以及优缺点

摘要：深入系列第十四篇，讲解创建对象的各种方式，以及优缺点。也就是说打着构造函数的幌子挂羊头卖狗肉，你看创建的实例使用都无法指向构造函数这样方法可以在特殊情况下使用。 JavaScript深入系列第十四篇，讲解创建对象的各种方式，以及优缺点。写在前面这篇文章讲解创建对象的各种方式，以及优缺点。但是注意：这篇文章更像是笔记，因为《JavaScript高级程序设计》写得真是太好了！ 1....

Terry_Tai 2019-08-21 11:40 评论0 收藏0
JavaScript深入之继承的多种方式和优缺点

摘要：深入系列第十五篇，讲解各种继承方式和优缺点。优点融合原型链继承和构造函数的优点，是中最常用的继承模式。寄生组合式继承为了方便大家阅读，在这里重复一下组合继承的代码组合继承最大的缺点是会调用两次父构造函数。 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎...

JackJiang 2019-08-20 16:30 评论0 收藏0