传统的OO语言有类的概念,但js(ES5)却是基于原型实现的面向对象。

原型是?
我们创建的每一个函数都会有一个原型(prototype)属性,这个属性是一个指针,指向函数的原型(prototype)对象。使用原型对象可以让构造函数的实例对象共享原型对象包含的属性和方法,而不会像工厂模式或者构造函数模式那样,方法本应该是可以是通用的,可是每一个创建的对象实例都要各自复制一份。

function People(name){
this.name=name;
this.sayName=function(){
console.log("Hi! my name is "+this.name);
};
}

var Jerel=new People("Jerel");
var AsenZ=new People("AsenZ"); console.log(Jerel.sayName==AsenZ.sayName); //false

但使用原型模式的话,同一个方法是被不同对象实例所引用的,上面的结果会返回ture。

function People(name){
this.name=name;
}
People.prototype.sayName=function(){
console.log("Hi! my name is "+this.name);
}; var Jerel=new People("Jerel");
var AsenZ=new People("AsenZ"); console.log(Jerel.sayName==AsenZ.sayName); //true

构造函数实例化的过程中发生了什么

构造函数通过new操作符实例化的每一个对象,都会生成一个指向构造函数原型对象的指针,不过在这里不是prototype(构造函数通过prototype指针指向原型对象),而是[[prototype]](或者叫—proto—),同时构造函数内部的this指针会绑定到该对象实例上。

构造函数内部绑定在this指针下的所有属性或者方法会被复制下来,作为实例对象的一部分,但是呢原型中定义的属性和方法仍是属于原型自身的,不归对象实例所有。对象只是引用。对象在调用一个属性或者方法时,如果在构造函数内部没有相应的定义,则会通过[[prototype]]指针去原型对象中寻找。

继承

  ——借用构造函数

如果需要继承构造函数内部this指针所绑定的所有属性和方法的话,可以在子构造函数中使用call方法,call方法的第一个参数会传入一个对象,这个对象会用来替换调用call方法的方法中的this,所以我们call方法的第一个参数可以传入子构造函数内部的this指针。

但是这种方法却继承不了原型内部的属性和方法。

function People(name){
this.name=name;
}
People.prototype.sayName=function(){
console.log("Hi! my name is "+this.name);
}; function Boy(name){
People.call(this,name);
} var Jerel=new Boy("Jerel"); console.log(Jerel.name); //Jerel
console.log(Jerel.sayName); //undefined

如果需要继承原型对象的内部属性和方法的话呢?

  ——组合继承(借用构造函数+原型链)

function People(name){
this.name=name;
}
People.prototype.sayName=function(){
console.log("Hi! my name is "+this.name);
}; function Boy(name){
People.call(this,name);
}
Boy.prototype=new People();
Boy.prototype.constructor=Boy; var Jerel=new Boy("Jerel"); console.log(Jerel.name); //Jerel
Jerel.sayName(); //Hi! my name is Jerel

还有不少其他的实现继承的方法,不过感觉思路差不了多少的,这一篇总结主要是为了加深一下自己对原型的理解。

虽然说有了babel,现在ES6已经可以放开的使用了!class定义类,extends实现继承不能再爽,但是这些新特性也不过是语法糖,底层的原理还是离不开最基本的原型。

javascript基于原型实现面向对象的更多相关文章

  1. JavaScript - 基于原型的面向对象

    JavaScript - 基于原型的面向对象 1. 引言 JavaScript 是一种基于原型的面向对象语言,而不是基于类的!!! 基于类的面向对象语言,比如 Java,是构建在两个不同实体的概念之上 ...

  2. javascript: 基于原型的面向对象编程

    Douglas Crockford指出javascript是世界上最被误解的编程语言.由于javascript缺少常见的面向对象概念,许多程序猿认为javascript不是一个合适的语言.我在做第一个 ...

  3. javascript基于原型的语言的特点

    一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  “原型对象”是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己 ...

  4. JavaScript基于原型的继承

    在一个纯粹的原型模式中,我们会摒弃类,转而专注于对象,基于原型的继承相比基于类的继承的概念上更为简单 if( typeof Object.beget !== 'function') { Object. ...

  5. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  6. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  7. Atitit.prototype-base class-based  基于“类” vs 基于“原型”

    Atitit.prototype-base class-based  基于“类” vs 基于“原型” 1. 基于“类” vs 基于“原型”1 2.  对象的产生有两种基本方式.一种是以原型(proto ...

  8. javascript面向对象 用new创建一个基于原型的javascript对象

    //创建一个类 其实就是个对象 var Student={ name:"robot", height:1.6, run:function(){ console.log(this.n ...

  9. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

随机推荐

  1. ERP产品价格成本计算的几个方法(转)

          一般财务计算产品价格又很多方法,我这里做了几个供参考,实体属性主要是编号.数量.价格等,这里就不列出了. /// <summary> /// 先进先出算法 /// </s ...

  2. k-means算法初识

    基础知识: K-means聚类算法 聚类,简单地说就是把相似的东西分到一组.同 Classification (分类)不同,对于一个 classifier ,通常需要你告诉它“这个东西被分为某某类”. ...

  3. C#连接MySql数据库的方法

    1.要连接MySql数据库必须首先下载MySql的连接.net的文件, 文件下载地址为http://download.csdn.net/detail/xiaoliu123586/91455792.解压 ...

  4. linux搭建一个配置简单的nginx反向代理服务器 2个tomcat

    1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...

  5. USACO section1.2 Transformation

    /* ID: vincent63 LANG: C TASK: transform */ #include <stdio.h> #include<stdlib.h> #inclu ...

  6. ZBrush中如何才能快速完成脸部雕刻(上)

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 查看更多内容请直接前往:http://www.zbrushcn ...

  7. 边工作边刷题:70天一遍leetcode: day 84-3

    Meeting Rooms I/II 要点:这题和skyline类似,利用了interval start有序的特点,从左向右处理,用一个heap来动态表示当前占用rooms的时间段,所以heap的si ...

  8. UESTC 884 方老师的专题讲座 --数位DP

    定义:cnt[L][K]表示长度为L,最高位为K的满足条件C的个数. 首先预处理出cnt数组,枚举当前长度最高位和小一个长度的最高位,如果相差大于2则前一个加上后一个的方法数. 然后给定n,计算[1, ...

  9. UVALive 6092 Catching Shade in Flatland --枚举+几何计算

    题意:x=[-200,200],y=[-200,200]的平面,一天中太阳从不同角度射到长椅(原点(0,0))上,有一些树(用圆表示),问哪个时刻(分钟为单位)太阳光线与这些圆所交的弦长总和最长.太阳 ...

  10. Ajax读取文件时出现的缓存问题

    对于Ajax缓存问题时,由于浏览器的版本问题,有时候当服务器端已更改文件中的内容,而客户端并得不到更新后的文件,而是延续之前的文件内容,解决办法是:在读取的文件内容后加一串的地址:JSON的格式为[{ ...