Javascript中prototype的使用详解

先看下面一段代码:

function Machine(ecode, horsepower) {
  this.ecode = ecode;
  this.horsepower = horsepower;
}

function showme() {
  alert(this.name + " " + this.ecode + " " + this.horsepower);
}

var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme = showme;
machine.showme();

这样一段代码,虽然建立了一个Machine对象后,通过machine.showme = showme;使得showme函数变成了Machine对象machine的方法。

但是,就看上面两个函数(一个是对象的构造函数,一个是普通方法)没有任何关系,这样的代码,不是那么“优雅“,因此,便有了prototype。

//机器
function Machine(ecode, horsepower) {
  this.ecode = ecode;
  this.horsepower = horsepower;
}
//特别注意这一句,Machine.prototype是第一次初始化的时候就初始化好的,
//当调用Machine作为构造函数的时候,engine的值不会再改变
Machine.prototype.engine = this.ecode + " " + this.horsepower;
Machine.prototype.showme = function () { alert(this.name + " " + this.ecode + " " + this.horsepower); }

利用以上代码,所有的Machine对象就有了showme方法了。

但是要特别注意:

prototype只是面对实例的,而不是面对类对象的。(js中,类本身就是一个对象)所以Machine.showme();会报错误,因为Machine这个对象是没有showme方法的。

那么,我们怎么使用showme方法呢?必须得新建一个Machine实例,只有Machine实例才会有这个方法。

var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme(); //输出machine1 code1 15。

有了prototype之后,我们更加容易实现继承关系。比如我现在写一个Car类,需要继承目前这个Machine类,只需要写如下代码即可:

//小汽车
function Car(name, ecode, horsepower) {
  this.name = name;
  //调用父类的构造函数,使得Car的对象有ecode、horsepower属性
  Machine.call(this, ecode, horsepower);
}
//Car的原型指向Machine,使Car对象有Machine原型的任意属性和方法,比如showme
Car.prototype = new Machine();

这里如何调用父构造函数,以及如何获得父类的原型,注释的都很清楚,就不在赘述了。

然后,我们可以新建一个对象测试一下:

//新建一个类Car的对象。
var xiali = new Car("xiali", "aaa", 15);
alert(xiali.engine);
xiali.showme();

以上,是prototype的基本应用,但是也是prototype的最主要的应用。

掌握的prototype的使用,在以后的过程中,对于对象的构建和继承,会有更深层次的理解。

查看更多JavaScript的语法,大家可以关注:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持我们。

(0)

相关推荐

  • js中prototype用法详细介绍

    prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类.我们所常见的类包括:数组变量(Array).逻辑变量(Boolean).日期变量(Date).结构变量(Function).数值变量(Number)

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

  • JavaScript中的原型prototype完全解析

    要理解JS中的prototype, 首先必须弄清楚以下几个概念    1. JS中所有的东西都是对象 2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf&q

  • Javascript之深入浅出prototype

    我们先来讲一个故事,一个大大的池塘,里面有很多鱼.这是属于我们大家的池塘所以里面的鱼我们都可以吃,但是我们也会从集市买一些鱼放在家里,那么放在家里的鱼肯定是属于我们私人的,外人是不会拥有的.那么在js里我们就把这个池塘称为原型对象,池塘里面我们所共享的鱼称为原型中的属性及方法,而我们自己的鱼称为构造函数中的属性及方法,我们是什么呢?对了,我们是对象的实例. 以上是为了让大家能够趣味性的对prototype有一个概念,接下来就通过代码具体总结一下prototype~ 一.理解prototype 我

  • JS构造函数与原型prototype的区别介绍

    构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的. 通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存. 例子: //----构造函数模式 为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠).那么,原型对象Cat就变成了下面这样: <script> function Cat(name, color) { this.n

  • JavaScript中的prototype使用说明

    1.prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承.这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释. 2.简单的例子 复制代码 代码如下: var Blog = function( name, url ){ this.name = name; this.url = url; }; Blog.prototype.jumpurl = ''; Blog.prototype.jump = fu

  • js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

  • JavaScript prototype 使用介绍

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

随机推荐