简述prototype:

在js中,每个构造函数都有一个原型属性prototype,因为这个属性的值通常是一个对象,又叫原型对象!你不需要显式的去定义原型对象,因为每个构造函数都会一个原型属性,通常在这个原型对象中,会包含一个constructor属性指向该原型对象的构造函数:

function a() {
    alert('hello');
} var b = new a();
console.log(b.constructor);//返回函数a的字面量function a() {alert('hello')} ;

以上代码中你会发现,首先你并没有定义函数a的prototype,以及constructor;但是在使用的时候构造函数a的实例对象b的constructor属性却正确的指向构造函数a;

我们都知道js是一种基于原型继承的语言,这里说的原型指的就是对象的原型属性!从这就能看出来,在js中,原型是用来实现继承的!那么为什么可以通过对象的原型就能实现继承了?这是因为在js中,所有使用同一个构造函数生成的实例对象,都共享该构造函数的原型对象,例如:

//定义构造函数
function user(name, age) {
    this.name = name;
    this.age = age;
} //定义构造函数user的原型方法
user.prototype.getName = function() {
    alert(this.name);
}
user.prototype.getAge = function() {
    alert(this.age);
} //生成实例
var userA = new user('a', '22');
var userB = new user('b', '30');
userA.getName();//a
userA.getAge();//22
userB.getName();//b
userB.getAge();//30

由以上代码可以看出,在构造函数中我们并没有定义获取名称和获取年龄的方法getName以及getAge;它们是在原型对象中定义的;但是我们在底下代码中的user构造函数的两个实例对象userA和userB却都可以使用构造函数的原型对象中的方法!这就是上面说的:所有使用同一个构造函数生成的实例对象,都共享该构造函数的原型对象!

prototype中的constructor属性:

上面简单的介绍了一下prototype中的constructor属性,该属性是原型对象中自带的属性,并且它始终是指向该原型的构造函数的!

//定义构造函数
function user(name, age) {
    this.name = name;
    this.age = age;
} //定义构造函数user的原型方法
user.prototype.getName = function() {
    alert(this.name);
}
user.prototype.getAge = function() {
    alert(this.age);
} //生成实例
var userA = new user('a', '22');
var userB = new user('b', '30');
console.log(userA.constructor === userB.constructor)//true;

当然,我们也可以动态的设置constructor属性的值:

user.prototype.constructor = user;

只是在我们没有重新定义覆盖prototype对象的时候,并不需要这样显示的去让constructor属性指向构造函数!

覆盖prototype对象:

上面我们简单介绍了prototype对象,并且也给出来一些简单使用的例子,在上面的例子中,我们都是往构造函数的prototype对象上添加方法或属性的,有一个方法我们就要添加一次,这样显的不够优雅,那么有没有一种写法是可以一次定义这些方法的了?答案当然是肯定的,这就是我们下面要讲的覆盖prototype对象,我们先来看看怎么做,下面我们重写上面的例子:

//定义构造函数
function user(name, age) {
    this.name = name;
    this.age = age;
}
//定义构造函数user的原型方法
user.prototype = {
    constructor : user,
    getName : function() {
        alert(this.name);
    },
    getAge : function() {
        alert(this.age);
    }

大家可以复制上面的代码,看看效果是不是跟之前的效果一样!相信大家看了代码之后应该也都明白了,既然prototype是一个对象,那么我们当然能重新定义一个对象去覆盖它了,但是这里值得注意的是,在原型对象中,默认是包含constructor属性指向构造函数的,在我们自己定义对象覆盖prototype对象时,要显式的定义constructor属性指向构造函数,否则,这个prototype对象的constructor属性就会是undefined!

结:

说到这里,关于prototype对象的一些知识以及基本用法,已经跟大家交代清楚了,因为js是基于原型继承的,所以了解prototype对象的相关对象,对于js面向对象编程是至关重要的!关于prototype的部分我们就先讲到这里,等以后有时间,我们在接着讲原型链,面向对象以及js中的继承等知识!

感谢大家的阅读,本文由平凡公子原创发布,转载请注明出处,谢谢!

JavaScript之prototype对象的更多相关文章

  1. [前端JS学习笔记]JavaScript prototype 对象

    一.概念介绍 prototype 对象 : 原型对象.在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象. ...

  2. [原创]javascript prototype 对象 函数 <精简的美丽......>

    精简的美丽...... javascript prototype 对象 函数 在javascript中我们都知道创建一个对象使用如下代码var x = {}对象可以拥有属性和方法var x = {   ...

  3. javascript 原型(prototype 、__proto__、函数、对象)

    一.类型 1.JavaScript中分为值类型(string/boolean/null/number/undefind).引用类型(数组.对象.函数): 2.数组.函数.对象都是对象: 对象是由函数创 ...

  4. 浅谈系列之 javascript原型与对象

    在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...

  5. javascript是判断对象是否是数组

    JS中的数据类型: 2大类 原始类型:值保存在变量本地的数据类型 5种:Number String Boolean undefined null Number:8bytes 舍入误差-->四舍五 ...

  6. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  7. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  8. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  9. javascript 之 prototype继承机制

    理解Javascript语言的继承机制 javascript没有"子类"和"父类"的概念,也没有"类"(class)和"实例&qu ...

随机推荐

  1. LINUX下安装软件方法命令方法

    1.通常Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2) rpm包,如software-1.2. ...

  2. CentOS 6.4 SSH 免密码登录

    在配置apache集群分布时,要使用SSH免密码登录.假设现在有两台机器apache@svn(192.168.1.100)作为svn机,apache@app(192.168.1.101)作为app机. ...

  3. Centos6.3 下使用 Tomcat-6.0.43 非root用户 jsvc模式部署 生产环境 端口80 vsftp

    一.安装JDK环境 方法一. 官方下载链接 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260 ...

  4. systemctl命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...

  5. Robot Framework进行web ui自动化测试,浏览器配置说明

    转载请注明出处,谢谢: chrome浏览器: 1.从如下地址下载与本地浏览器版本号一致的chromedriver.exe驱动文件: http://chromedriver.storage.google ...

  6. GCC 编译详解[转]

    转自http://www.cnblogs.com/azraelly/archive/2012/07/07/2580839.html GNU CC(简称为Gcc)是GNU项目中符合ANSI C标准的编译 ...

  7. Android使用Handler造成内存泄露的分析及解决方法

    一.什么是内存泄露? Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用 ...

  8. PHP域名解析(一个IP绑多域名)----看看可以,并不值得借鉴

    PHP域名解析(一个IP绑多域名)----看看可以,并不值得借鉴 好处当然是不用买多网卡.不用设置其它端口为WEB端口了,一张网卡上.都用同一个80端口建很多网站. 假设有三个域名:     [url ...

  9. IOS 怎么用UIScrollView来滚动和缩放他的内容第一篇

    本篇文章来自于互联网资料翻译 UIScrollView是在IOS最有用的控件之一.他是一个来展现超过一个屏幕的内容的很好的方式.下面有很多的技巧来使用他. 这篇文章就是关于UIScrollView的, ...

  10. Android Security Internals