热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

浅谈JavaScript中的原型模式

person2和person3的name属性都返回dw。原型对象的属性和方法被所有特定类型的实例共享。在默认的情况下,每个原型对象会自动获得一个constructor属性,用于指向prototype属性所在函数的指针,如Person.prototype.constructor指向Personalert(Person.p

    在Javascript中创建对象由很多种方式,如工厂模式、构造函数模式、原型模式等:

//工厂模式
function createPerson(name,age,job)
{
	var o = new Object;
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function()
	{
		alert(this.name);
	}
		return o;
}
var person = createPerson('dw',20,'IT');


其等价的原型模式:

function Person()
{

}
Person.prototype = 
{
	name:"dw",
	age:20,
	job:"IT",
	sayName:function()
	{
		alert(this.name);
	}
};
var person2 = new Person;

    在Javascript中,每个函数都有prototype属性,该属性是一个指向原型对象的指针,可以用于创建所有实例共享的属性的和方法。在原型模式下,在创建一个实例person3

var person3 = new Person;
person2.name;  //dw
person3.name; //dw

person2和person3的name属性都返回dw。原型对象的属性和方法被所有特定类型的实例共享。在默认的情况下,每个原型对象会自动获得一个constructor属性,用于指向prototype属性所在函数的指针,如Person.prototype.constructor指向Person

alert(Person.prototype.constructor);   //返回Person的构造函数
//Person.prototype.constructor只是指向Person的一个指针,与Person并不相等
//以下均返回false
alert(Person.prototype.cOnstructor=== Person)
alert(Person.prototype.cOnstructor== Person)

实例、原型对象、构造函数的三角恋关系如下图所示:

在每一个实例的内部都有一个指针指向原型对象,在ECMA-262的第五版称之为[[prototype]]。在原型模式下创建的实例与构造函数没有直接的关系。


     虽然无法访问[[prototype]],但可以用isPrototypeOf()方法来确定对象是否是原型对象。

alert(Person.prototype.isPrototypeOf(person2)); //true
alert(Person.prototype.isPrototypeOf(person3));//true

因为在实例内部均有一个指向Person.prototype的指针,所以均返回true。在ECMAScript 5中,可以用Object.getPrototypeOf()返回[[prototype]],即返回原型对象

alert(Object.getPrototypeOf(person2) == Person.prototype);  //true
alert(Object.getPrototypeOf(person2).name); //dw

    注意:虽然可以用实例访问原型中的值,但是不能通过实例重写原型中的值,即实例中添加了与原型中同名的属性,则原型的同名属性被屏蔽。

person2.name="qs";
alert(person2.name);//qs

即使将name属性设置为null,仍然不能访问原型中的name。可以用delete删除实例的name属性,则可以重新访问原型中的name.

person2.name = null;
alert(person2.name);  //null
delete person2.name;alert(person2.name); //dw


    对于同名属性,可以用hasOwnProperty("propertyName")方法检测属性是属于实例还是原型,该方法只有在给定的属性存在实例中时才返回true



推荐阅读
  • 使用JavaScript提取并显示HTML表格中的特定行和列
    本文介绍如何利用JavaScript遍历HTML表格,提取指定行和列的数据,并将其打印出来。我们将通过一个简单的示例来演示实现方法,包括HTML结构和相应的JavaScript代码。 ... [详细]
  • 本文深入探讨了JavaScript中循环结构的使用方法,特别是While循环,用于重复执行一段代码直到特定条件不再满足。同时,文章还介绍了Switch语句在多条件分支选择中的应用。 ... [详细]
  • 本文详细介绍了JavaScript中数组的各种操作方法,包括创建、检测、字符串转换、添加和删除元素、翻转与排序、连接与分割、位置查找、迭代处理以及数组的缩小方法等,适合初学者深入理解JavaScript数组的使用。 ... [详细]
  • 本文探讨如何在VueJS项目中通过配置vue.config.js文件实现多页面应用(MPA),特别是针对管理端和客户端的不同需求。 ... [详细]
  • 嗨,我正在为我的api调用使用axious,并且无法在nodejs中解析我的数据,不确定为 ... [详细]
  • 本文介绍了一个灵活且功能强大的 JavaScript 日期格式化函数,该函数支持多种日期和时间格式的自定义输出。 ... [详细]
  • 本文介绍如何使用 Bootstrap-table 插件实现表格中某一列数据的求和,并在表脚显示总计值。 ... [详细]
  • 本文介绍如何使用JavaScript计算并显示指定年份的周数以及每周的起止日期,例如2015年的第1周从1月1日至1月7日,第2周从1月8日至1月15日。 ... [详细]
  • 本文详细介绍了利用JavaScript实现的五种不同的网页弹出窗口技术,包括全屏窗口、全屏模式窗口、带收藏链接工具栏的窗口、网页对话框及HTA窗口。 ... [详细]
  • 本文探讨了在网站编辑器中使用JavaScript实现优酷视频播放器自适应宽度的方法。尽管尝试过多种CSS解决方案,但都存在一定的局限性,因此最终决定采用JavaScript来动态调整视频播放器的尺寸。 ... [详细]
  • 本文详细介绍了 JavaScript 中 Split 方法的使用方式和一些实用技巧。通过示例,我们将探讨如何利用 Split 方法有效地分割字符串,并获取所需的数据。 ... [详细]
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
author-avatar
hadley朱_469
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有