js的原型模式
以下内容来自《JavaScript高级程序设计》第三版
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
function Person(){
}
Person.prototype.name='lisi';
Person.prototype.age=23;
Person.prototype.job='Software engineer';
Person.prototype.sayName=function(){
alert(this.name);
}
var person1 = new Person();
alert(person1.name);//lisi
var person2 = new Person();
alert(person2.name);//lisi
alert(person1.sayName==person2.sayName);//true
1、理解原型对象
只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包括一个指向prototype属性所在函数的指针。就像前面例子,Person.prototype.constructor指向Person。通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。
创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。
虽然在所有访问中都无法访问[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,只要[[Prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true。
alert(Person.prototype.isPrototypeOf(person1));//true
alert(Person.prototype.isPrototypeOf(person2));//true
ECMAScript5增加了一个新方法,叫Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[Prototype]]的值。
alert(Object.getPrototypeOf(person1)==Person.prototype);//true
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到具有给定名字的属性,则返回该属性的值;如果没找到,则继续搜索指针执行的原型对象,在原型对象中查找具有指定名字的属性。如果在原型对象中找到了该属性,则返回该属性的值。也就是说,当我们调用person1.sayName()方法的时候,会先后执行两次搜索。首先,会搜索实例person1的sayNane方法,没有继续搜索person1原型的sayName方法。
虽然可以通过实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性会屏蔽原型中的属性。
function Person(){
}
Person.prototype.name='lisi';
Person.prototype.age=23;
Person.prototype.job='Software engineer';
Person.prototype.sayName=function(){
alert(this.name);
}
var person1 = new Person();
alert(person1.name);//lisi
var person2 = new Person();
person2.name='zhangsan';
alert(person2.name);//zhangsan
即使将实例属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向的原型的链接。不过,使用delete操作符可以完全删除实例属性,从而让我们能够重新访问原型中的属性。
var person1 = new Person();
alert(person1.name);//lisi
var person2 = new Person();
person2.name=null;
alert(person2.name);//null
delete person2.name;
alert(person2.name);//lisi
使用hasOwnProperty()方法可以检测一个属性是存在实例中还是原型中。这个方法(不要忘了是从Object继承来的)只在给定属性存在与对象实例中时返回true。
function Person(){
}
Person.prototype.name='lisi';
Person.prototype.age=23;
Person.prototype.job='Software engineer';
Person.prototype.sayName=function(){
alert(this.name);
}
var person1 = new Person();
alert(person1.hasOwnProperty('name'));//false
person1.name = 'wangwu';
alert(person1.name);//wangwu
alert(person1.hasOwnProperty('name'));//true var person2 = new Person();
alert(person2.name);//lisi
alert(person2.hasOwnProperty('name'));//false
delete person1.name;
alert(person1.name);//lisi
alert(person1.hasOwnProperty('name'));//false
2、原型与in操作符
有两种方式使用in操作符:单独使用和在for-in中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性是存在实例中还是原型中。
function Person(){
}
Person.prototype.name='lisi';
Person.prototype.age=23;
Person.prototype.job='Software engineer';
Person.prototype.sayName=function(){
alert(this.name);
}
var person1 = new Person();
alert(person1.hasOwnProperty('name'));//false
alert('name' in person1);//true
person1.name = 'wangwu';
alert(person1.name);//wangwu
alert(person1.hasOwnProperty('name'));//true
alert('name' in person1);//true
同时使用hasOwnProperty()和in操作符,就可以确定该属性到底存在与实例中还是原型中。
function hasPrototypeProperty(object,name){
return !object.hasOwnProperty(name) && (name in object);
}
只要in操作符返回true而hasOwnProperty()返回false,就可以确定属性是原型中的属性。
在使用for-in循环时,返回的是所有能过通过对象访问的、可枚举的属性,其中既包括存在实例中的属性,也包括存在于原型中的属性。
要取得对象上所有的可枚举的实例属性,可以使用ECMAScript5的Object.keys()方法;
function Person(){
}
Person.prototype.name='lisi';
Person.prototype.age=23;
Person.prototype.job='Software engineer';
Person.prototype.sayName=function(){
alert(this.name);
}
var keys = Object.keys(Person.prototype);
alert(keys);//name,age,job,sayName
var person1 = new Person();
person1.name='zhangsan';
person1.age=21;
var pkeys = Object.keys(person1);
alert(pkeys);//name,age
如果你想要得到所有的实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyNames()方法。
var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);//constructor,name,age,job,sayName
3、更简单的原型语法
前面的例子每增加一个属性和方法都要敲一遍Person.prototype。为减少不必要的输入,从视觉上更好地封装原型的功能,常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象,如下:
function Person(){
}
Person.prototype= {
name : 'lisi',
age : 23,
job : 'Software engineer',
sayName : function () {
alert(this.name);
}
}
我们将Person.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果一样,但是有一个例外:constructor属性不再指向Person啦。每创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性。在这里,本质上完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。instanceOf操作符还能返回正确的结果,但通过constructor已经无法确定对象的类型啦。
var p = new Person();
alert(p instanceof Object);//true
alert(p instanceof Person);//true
alert(p.constructor == Object);//true
alert(p.constructor == Person);//false
如果constructor很重要,可以向下面这样设置:
function Person(){
}
Person.prototype= {
constructor:Person,
name : 'lisi',
age : 23,
job : 'Software engineer',
sayName : function () {
alert(this.name);
}
}
注意:以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下,原生的constructor属性是不可枚举的,因此如果你使用兼容ECMAScript5的JavaScript引擎,可以试一试Object.defineProperty().
//重设构造函数,只适用于ECMAScript5兼容的浏览器
Object.defineProperties(Person.prototype,"constructor",{
enumerable:false,
value:Person
});
js的原型模式的更多相关文章
- [js]js设计模式-原型模式
构造函数模型- 对象的属性和方法每人一份 function createJs(name, age) { this.name = name; this.age = age; this.writeJs = ...
- 攻略前端面试官(三):JS的原型和原型链
本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...
- Js原型模式
function Person(){ } Person.prototype.name = "xd"; Person.prototype.age = 26; Person.proto ...
- 面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式
什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下 ...
- 【JavaScript】 JS面向对象的模式与实践 (重点整治原型这个熊孩子 (/= _ =)/~┴┴ )
参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript> —— KYLE SIMPSON 在JS的面向 ...
- 关于js的对象创建方法(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)
// 1.工厂方式创建对象:面向对象中的封装函数(内置对象) 简单来说就是封装后的代码,简单的工厂模式是很好理解的,关于它的作用,就是利用面向对象的方法,把一些对象封装,使一些占用空间多的,重复的代码 ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作. 工厂 ...
- JS面向对象(1)——构造函数模式和原型模式
1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...
随机推荐
- 欢迎你,phpWeChat 开发者
感谢您使用 phpWeChat 来作为自己网站或者微信公共号的开发工具.phpWeChat 是一款高效.稳定的网站+微信公共号内容管理系统(CMS),也可称之为一个PHP开发框架. phpWeChat ...
- ROS->The Official Tutorial
系统安装 我的使用环境是Ubuntu 16.04LTS 32bit # deb cdrom:[Ubuntu 16.04 LTS _Xenial Xerus_ - Release amd64 (2016 ...
- SQLSERVER 删除用户15434错误
sysprocesses 表中保存关于运行在 Microsoft® SQL Server™ 上的进程的信息.这些进程可以是客户端进程或系统进程.sysprocesses 只存储在 master 数据库 ...
- 【转】libevent和基于libevent的网络编程
转自: http://www.cnblogs.com/nearmeng/p/4043548.html 1 libevent介绍和安装 介绍 libevent是一个轻量级的基于事件驱动的高性能的开源网络 ...
- kvm虚拟化平台搭建入门
KVM虚拟化有两种网络模式:1)Bridge网桥模式2)NAT网络地址转换模式Bridge方式适用于服务器主机的虚拟化.NAT方式适用于桌面主机的虚拟化. 环境: 本次实验要开启VMWare中对应Ce ...
- UISegmentedControl和UIStepper的使用
UISegmentedControl:分栏控件,常用的属性和方法是 1.tintColor:控制分栏控件的颜色风格 2.insertSegmentWithTitle(Image):插入分栏标题(图片) ...
- 安装Oracle报错,全部为未知!
安装Oracle一开始就报错:需要将以下日志文件发送给管理员,<未知><未知><未知>. 这种问题需要对oracle的setup.exe设置 兼容性.具体如下图:
- 关于Failed to install helloworld.apk on device 'emulator-5554!的一个解决办法
好不容易架好了android环境,把该安得都安好了,结果发现在安装过程中创建一个虚拟设备映象就占用了c盘34g的空间,我的系统盘差点瘫了,看来以后就只能先用这一个虚拟设备调试了, 接着说上边这个问题, ...
- Python文本处理——中文标点符号处理
中文文本中可能出现的标点符号来源比较复杂,通过匹配等手段对他们处理的时候需要格外小心,防止遗漏.以下为在下处理中文标点的时候采用的两种方法,如有更好的工具,请推荐补充. 中文标点集合 比较常见标点有这 ...
- CentOS下Apache开启Rewrite功能
1.centos的配置文件放在: /etc/httpd/conf/httpd.conf 打开文件找到: LoadModule rewrite_module modules/mod_rewrite.so ...