在JavaScript中,所有函数都会拥有一个叫做prototype的属性,默认初始值为“空”对象(没有自身属性的对象)。

  1、原型属性

  如下所示,简单地定义一个函数:

    function foo(a, b){

      return a * b;

    }

  这时,就可以像访问其他对象一样访问该函数的属性,而这些属性中就包括prototype属性,它的初始值是一个“空”对象,

可以看成是:foo.prototype = {}。

  我们可以赋予这个空对象一些方法和属性,这并不会对foo函数本身造成什么影响,只有当foo()作为构造器(即构造函数)使用时,这些属性才会起作用。

  下面来看看如何利用原型添加方法与属性。

  2、利用原型添加方法与属性以及使用原型的方法与属性

  首先,构建一个具体的构造器函数Gadget():

 function Gadget(name, color){
this.name = name;
this.color = color;
this.whatAreYou = function(){
return 'I am a ' + this.color + ' ' + this.name;
};
}

  然后,利用构造器函数的prototype属性来为其增加两个属性(price和rating)和一个方法(getInfo),

  方法一:

 Gadget.prototype.price = 100;
Gadget.prototype.rating= 3;
Gadget.prototype.getInfo = function(){
return 'Rating: ' + this.rating + ', price: ' + this.price;
};

  方法二:

 Gadget.prototype = {
price: 100,
rating: 3,
getInfo: function(){
return 'Rating: ' + this.rating + ', price: ' + this.price;
}
}

  现在,使用该构造器来新建对象并访问之前定义的那些属性和方法:

 //创建一个对象
var newtoy = new Gadget('webcam', 'black');
//访问之前定义的属性
newtoy.name; //输出为 webcam newtoy.color; //输出为 black new.whatAreYou(); //输出为 I am a black webcam newtoy.price; //输出为 100 newtoy.rating; //输出为 3 newtoy.getInfo(); //输出为 Rating: 3, price: 100

  对于原型来说,最重要的一点就是它的“实时”性,由于JavaScript几乎所有对象都是通过传引用的方式来传递的,因此我们所创建的每个新对象实体中并没有一份属于自己原型副本,这也就意味着可以随时修改prototype属性,并且由同一构造器创建的所有对象的prototype属性也会同时改变(甚至还会影响在修改之前就已经创建了的那些对象)。

  如果在此时继续向上面例子中的原型再添加一些方法,即便newtoy对象在吸食添加的方法定义之前就已经被创建了,但newtoy对象依然可以访问新增的方法。

  我们不仅可以在相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象。但要注意,原型的声明是有先后顺序的,所以重写的原型会切断之前的原型。

  3、自身属性与原型属性

  回到上面的例子,首先来看看原型链的执行模式:当对象newtoy访问某个属性是,例如name属性,JavaScript引擎会遍历该对象的所有属性,并查找name属性,如果找到了就会立即返回,因为构造器函数中,确实定义了这个属性。而如果newtoy访问的是price属性,JavaScript引擎依然会查询该对象的所有属性,但是该对象中没有rating属性,此时脚本引擎就会去查询用于创建当前对象的构造器函数的原型(等价于直接访问 newtoy.constructor.prototype)。如果再原型中找到了该属性,就立即返回。如果依然没有找到,则会继续搜索其原型的原型,以此类推,知道搜索到Object.prototype。

  如果对象的自身属性与原型属性同名,那么返回的将是自身属性设置的值,因为对象自身属性的优先级高于原型属性。

  如果要判断一个属性时自身属性还是原型属性,可以使用 hasOwnProperty()方法来实现。若返回值为true,则说明是对象的自身属性;返回false,说明是对象的原型属性。

  附上一本参考书:《JavaScript面向对象编程指南(第2版)》

浅谈JavaScript原型的更多相关文章

  1. 浅谈JavaScript原型对象与相关设计模式

    引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...

  2. 浅谈JavaScript原型图与内存模型

    js原型详解 1.内存模型: 1.原型是js中非常特殊一个对象,当一个函数(Person)创建之后,会随之就产生一个原型对象 2. 当通过这个函数的构造函数创建了一个具体的对象(p1)之后,在这个具体 ...

  3. 浅谈JavaScript原型与原型链

    对于很多前端开发者而言,JavaScript的原型实在是很让人头疼,所以我这边就整理了一下自己对应原型的一点理解,分享给大家,供交流使用 原型 说起原型,那就不得不说prototype.__proto ...

  4. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  5. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  6. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  7. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  8. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  9. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

随机推荐

  1. win10更新后IE不见了

    只是快捷方式不见了,到C:\Program Files\internet explorer\iexplore.exe就看到了,可以正常运行

  2. bzoj3140: [Hnoi2013]消毒(二分图)

    题目描述 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为a*b*c,a.b.c 均为正整数.为了实验的方便,它被划分为a*b*c个单位立方体区 ...

  3. Task4

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 模仿 spring IOC Annotation版自动装配

    spring 有两大核心 IOC和AOP.  IOC (inversion of control) 译为 控制反转,也可以称为 依赖注入 ; AOP(Aspect Oriented Programmi ...

  5. es6-01

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer ManufacturersAssociation)通过ECMA-262标准化的脚本程 ...

  6. sharepoint_study_11

    描述:修改管理员密码和账户后,管理中心无法打开.(提示:HTTP Error 503. The service is unavailable.) 解决: 1.打开iis 2.右击“应用程序池”下的”S ...

  7. 使用Entity Framwork 保存数据时,提示不能在对象中插入重复键,违反了PRIMARY_KEY约束

    这种情况,大多发生在有外键存在的情况下,解决方法是: 把dataContext.Set<T>().Add(model)修改成dataContext.Models.Add(model);

  8. P3796 【模板】AC自动机

    传送门 AC自动机的模板 简单的理解就是字典树上的KMP 注意数组不要开太大 不然每次memset耗时太多 有一个小优化 每次走 fail 边找匹配时只有一些会更新答案 那么就可以把没用的fail边压 ...

  9. matplolib实例之 城市气候与海洋的关系研究

  10. sf04_操作系统中 heap 和 stack 的区别

    概述 本文分三部分,描述有所重叠,但可以让你对栈与堆有一个比较清晰.全面的认识 heap 和 stack是什么 堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top) ...