Javascript面向对象编程（一）：对象的产生

Javascript是一种基于对象（Object-Based）的编程语言，常说在javascript中一切都是对象，那么对象究竟是怎么产生的呢？

（一）原始模式

首先说一下我们常见的对象——Object实例。创建Object实例方式有很多，第一种是使用new操作符后跟Object构造函数：

var person=new Object();
person.name="张三";
person.age=21;

　　另一种方式是对象字面量表示法：

var person={name:"张三",age:21
}

　　这两种方式是生成对象的原始模式。这样写有个很明显的弊端：如果我们需要n多个person对象，那么我们编码是相当罗嗦苦逼的。既然这样，那我们需要一个工厂去批量生产这些person实例。

（二）工厂模式

function createPerson(name,age){var o=new Object();o.name=name;o.age=age;return o;
}
var person1=createPerson("张三",20);
var person2=createPerson("李四",21);

　　这样每次调用createPerson函数，传入两个参数我们就可以创建一个person实例。这样虽然可以创建对象，但是仍然不能体现“类”与对象实例的关系。

（三）构造函数模式

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

function Person(name,age){this.name=name;this.age=age;
}
var person1=new Person("张三",21);
var person2=new Person("李四",20);

　　这样我们就可以通过new Person构造函数创建一个实例对象，慢慢地和我们所认知的“类”与对象实例的关系接近了，我们再进一步拓展一下这个构造函数（毕竟实际当中人的属性总不单name和age吧）。

function Person(name,age){this.name=name;this.age=age;this.type="高级动物";this.speak=function(){alert(this.name);}
}
var person1=new Person("张三",21);
var person2=new Person("李四",20);

　　我们为对象添加了type属性和speek方法。可我们发现，每一个实例对象，type属性和speak()方法都是一模一样的内容，每生成一个实例，都必须为重复的内容，多占用一些内存,这样势必会造成大量的内存浪费，那有没有比较方法把一模一样的内容单独拿出来共享呢，让所有的实例对象都能访问？

（四）原型模式（Prototype模式）

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。那我们可以把那些一模一样的内容（不变的属性和方法），直接定义在prototype对象上。

function Person(name,age){this.name=name;this.age=age;
}
Person.prototype.type="高级动物";
Person.prototype.speak=function(){alert(this.name);
}
var person1=new Person("张三",21);
var person2=new Person("李四",20);
console.log(person1.type);
console.log(person2.type);
person1.speak();
person2.speak();

　　这种方式其实就是常说的构造函数模式+原型模式，就是将不同的部分放在构造函数中去构造，把相同的部分放在原型中去共享继承。

总结：结合上面四种对象产生方式，我们可以根据实际开发需要去创造我们需要的对象，其实，四种模式并没主次优劣之分，只要能最大限度节省内存和代码复用高效才是最好的方式。

转载于:https://www.cnblogs.com/iRavior/archive/2012/12/05/2804171.html

Javascript面向对象编程（一）：对象的产生相关推荐

JavaScript面向对象编程BOM对象
BOM对象一.BOM 1.什么是BOM? 二.浏览器对象模型: 1.Window(窗口对象): 2.Document(文档)对象 3.location对象 4.navigator对象 5.scree ...
《JavaScript面向对象编程指南》——第1章引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰更多章节内容可以访问云栖社区" ...
（二）Javascript面向对象编程：构造函数的继承
Javascript面向对象编程:构造函数的继承这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
javascript 面向对象编程（工厂模式、构造函数模式、原型模式）
javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...
JavaScript面向对象编程深入分析
JavaScript面向对象编程深入分析一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...
《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记第一章面向对象的JavaScript 第二章基本数据类型与流程控制变量 ...
(转)Javascript 面向对象编程（一）：封装
它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承&q ...
浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...
JavaScript 面向对象编程（四） —— 正则表达式
本篇为 JavaScript 进阶 ES6 系列笔记第四篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 : 系列笔记: JavaScript 面向对象编程(一) -- 面向对 ...
JavaScript 面向对象编程（三） —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门系列笔记: JavaScript 面 ...

Javascript面向对象编程（一）：对象的产生

Javascript面向对象编程（一）：对象的产生相关推荐

最新文章

热门文章