创建对象的几种方法
对象创建的几种常用方法:
- 字面量的形式创建对象;
var person = { name:'Nicholas', age:20, job:'前端开发', sayName:function(){ return this.name; } }
例子上创建一个名字为 person 的对象,并为它添加了二个属性(name、age、job )和一个 方法(sayName())的方法,其中 sayName 函数的 this 指向person.name。
-
工厂模式创建对象
function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { return this.name; }; return o; }
函数 createPerson() 能够根据解释的参数来构建一个包含所有必要信息的 Person 对象。可以无数次地调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。
- 构造函数创建对象
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } /// function sayName(){ return this.name; } /// 实例 var person1 = new Person('Nicholas', 25, 'Software'); var person2 = new Person('Greg', 25, '前端开发');
与的createPerson()函数的不同之处:
(1) 没有显式地创建对象;
(2) 直接将属性和方法赋给了 this 对象;
(3) 没有return语句。
此外,还应该注意到函数名 Person 使用的是大写字母 P。按照惯例,构造函数始终都应该以一个 大写字母开头,而非构造函数则应该以一个小写字母开头。
要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤:
(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
(3) 执行构造函数中的代码(为这个新对象添加属性);
(4) 返回新对象。 - 原型模式创建对象
创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那 么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以 让所有对象实例共享它所包含的属性和方法。
function Person() { } Person.prototype.name = "Nicholas"; Person.prototype.age = 30; Person.prototype.job = "前端"; Person.prototype.sayName = function () { return this.name; }; var person1 = new Person(); var person2 = new Person();
理解原型对象
无论什么时候,只要创建一个函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有的对象都会默认一个constructor(构造属性)属性,这个属性包含一个指向 prototype 属性所在函数的指针。各对象之间的关系,Proson构造函数与Person.prototype创建实例的代码为例。
构造函数与prototype(原型)的关系如图
-
组合使用构造函数模式和原型模式
创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实 例属性,而原型模式用于定义方法和共享的属性。function Person(name,age,job){ this.name = name; this.age = age; this.job = job;["Jack", "Court", "Van"] this.friends = ["Jack","Court"]; }; Person.prototype = { constructor:Person, sayName: function() { console.log(this.age); } }; var person1 = new Person("Nicholas",30,"Sofware"); var person2 = new Person("Greg",25,"Doctor"); person1.friends.push("Van"); console.log(person1.friends);//["Jack", "Court", "Van"] console.log(person2.friends);//["Jack", "Court"] console.log(person1.sayName == person2.sayName) // true
在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性 constructor 和方 法 sayName()则是在原型中定义的。而修改了 person1.friends(向其中添加一个新字符串),并不 会影响到 person2.friends,因为它们分别引用了不同的数组。 这种构造函数与原型混成的模式,是目前在 ECMAScript 中使用最广泛、认同度最高的一种创建自 定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。
- 动态原型模式创建对象
function Person(name,age,job) { this.name = name; this.age =age; this.job = job; if(typeof this.sayName != "function") { Person.prototype.sayName = function() { console.log(this.name); } } } var friend = new Person("Nicholas",25,"Software Engineer"); friend.sayName(); // Nicholas
- 寄生构造函数模式创建对象
// 一这个模式跟工厂模式其实,是一模一样的。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添一个 return 语句,可以重写调用构造函数时返回的值。 function Person(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { return this.name; } return o; } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName(); //"Nicholas"
在这个例子中,Person 函数创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返 回了这个对象。除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实 是一模一样的。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句,可以重写调用构造函数时返回的值。
function SpecialArray() { var values = new Array(); values.push.apply(values,arguments); values.toString = function () { return this.join("|"); } return values; } var color = new SpecialArray('blue','yellow','red','green'); var toColorString = color.toString(); console.log(color,toColorString) // "blue|yellow|red|green"
在这个例子中,我们创建了一个名叫 SpecialArray 的构造函数。在这个函数内部,首先创建了 一个数组,然后 push()方法(用构造函数接收到的所有参数)初始化了数组的值。随后,又给数组实 例添加了一个 toPipedString()方法,该方法返回以竖线分割的数组值。最后,将数组以函数值的形 式返回。接着,我们调用了 SpecialArray 构造函数,向其中传入了用于初始化数组的值,此后又调 用了 toPipedString()方法。
原文地址:https://www.cnblogs.com/FishStudy520/p/11792327.html
- 体验扁平化的WordPress 后台管理界面
- Python 项目实践二(生成数据)第二篇
- 重新审视SqlDataReader的使用
- Python 项目实践二(生成数据)第一篇
- 删除 WordPress 导航菜单的多余 CSS 选择器
- 删除 WordPress 导航菜单的多余 CSS 选择器
- 使用asp.net 2.0的CreateUserwizard控件如何向自己的数据表中添加数据
- 自定义(修改)WordPress管理后台界面的字体样式
- Sql Server 2005 ROW_NUMBER 函数实现分页
- Http协议中的数据传送之多重表单提交--multipart/form-data
- 另类大数据:中国有嘻哈的rapper们都在唱些什么?
- jquery属性值选择器
- sqlserver 2000/2005 Ambiguous column error错误解决办法
- jquery 层级选择器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法