zoukankan      html  css  js  c++  java
  • 浅谈JavaScript原型

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

      1、原型属性

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

        function foo(a, b){

          return a * b;

        }

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

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

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

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

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

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

    1 function Gadget(name, color){
    2     this.name = name;
    3     this.color = color;
    4     this.whatAreYou = function(){
    5         return 'I am a ' + this.color + ' ' + this.name;
    6     };
    7 }

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

      方法一:

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

      方法二:

    1 Gadget.prototype = {
    2     price: 100,
    3     rating: 3,
    4     getInfo: function(){
    5         return 'Rating: ' + this.rating + ', price: ' + this.price;
    6     }
    7 }

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

     1 //创建一个对象
     2 var newtoy = new Gadget('webcam', 'black');
     3 //访问之前定义的属性
     4 newtoy.name;    //输出为 webcam
     5 
     6 newtoy.color;     //输出为 black
     7 
     8 new.whatAreYou();    //输出为 I am a black webcam
     9 
    10 newtoy.price;    //输出为 100
    11 
    12 newtoy.rating;    //输出为 3
    13 
    14 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版)》

  • 相关阅读:
    嵌入优酷视频
    简单字符串处理
    随机生成一个大写字母
    生成二维码
    【计算机网络(谢希仁)-读书笔记】5.2 用户数据报协议UDP
    【计算机网络(谢希仁)-读书笔记】5.1 运输层协议概述
    【计算机网络(谢希仁)-读书笔记】4.6 IP多播
    【计算机网络(谢希仁)-读书笔记】4.5 因特网的路由选择协议
    【计算机网络(谢希仁)-读书笔记】4.4 网际控制报文协议ICMP
    【计算机网络(谢希仁)-读书笔记】4.3 划分子网和构造超网
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/7027672.html
Copyright © 2011-2022 走看看