传统的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. 读书笔记——Windows环境下32位汇编语言程序设计(5)模态对话框

    资源可以用VC之类的生成,然后拷贝出来. 例如:每一个MFC工程都有一个resource.h,没有做任何修改时,这个resource.h文件是原来自带的.当对资源进行过修改添加之类的时,新添加的资源的 ...

  2. 修改mysql默认字符集的方案

    mysql默认字符集能否进行修改呢?答案是肯定的,下面就将教您两种修改mysql默认字符集的方法,希望对您学习mysql默认字符集方面能有所启迪. (1) 最简单的修改方法,就是修改mysql的my. ...

  3. 烂泥:centos安装及配置DHCP服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 有关DHCP服务器的配置一直打算学习,这几天终于抽出时间来专门学习这个知识点. DHCP:动态主机配置协议,在此就不多做介绍.不清楚的童鞋,可以去百度下 ...

  4. python正则表达式 小例几则

    会用到的语法 正则字符 释义 举例 + 前面元素至少出现一次 ab+:ab.abbbb 等 * 前面元素出现0次或多次 ab*:a.ab.abb 等 ? 匹配前面的一次或0次 Ab?: A.Ab 等 ...

  5. WIN7下VPN服务器的建立 我又在给自己挖坑了。。。

    先说一下为什么会有这篇文章吧,和同学们玩局域网对战游戏一般都会用各种游戏对战平台,比如浩方之类的.但是用过这类东西的人都知道,抢房间.高延迟等等问题也是很麻烦的.于是我一个同学下了个VPN软件,但是与 ...

  6. FZU Problem 2150 Fire Game

    Problem 2150 Fire Game Accept: 145    Submit: 542 Time Limit: 1000 mSec    Memory Limit : 32768 KB P ...

  7. JS判断浏览器类型及版本

    浏览器 ie firefox opera safari chrome 分类: 一路辛酸---JavaScript 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, S ...

  8. private成员变量真的私有吗?(用指针刨他祖坟)

    今天写程序时突然想到的,为什么不用指针去获取类的成员变量呢.于是做了这个实验.首先定义了一个类: class Test { private: int i; char c; int* p; public ...

  9. JavaScript的执行上下文

    在JavaScript的运行过程中,经常会遇到一些"奇怪"的行为,不理解为什么JavaScript会这么工作. 这时候可能就需要了解一下JavaScript执行过程中的相关内容了. ...

  10. C++ 之 常量成员函数

    类的常量成员函数 (const member function), 可以读取类的数据成员,但是不能修改. 1  声明 1.1  const 关键字 在参数列表后,加 const 关键字,声明为常量成员 ...