js原型

问题:什么是js原型?
js每声明一个function,都有prototype原型,prototype原型是函数的一个默认属性,在函数的创建过程中由js编译器自动添加。
也就是说:当生产一个function对象的时候,就有一个原型prototype。
举个栗子:
是不是还看到了一个_proto_的属性?!骚年,你的眼睛不错~待会在解释prototype和_proto_的基友关系!
prototype的属性值是一个对象,是属性的集合,是属性的集合,是属性的集合,重要事情说三遍!
为什么要说他的属性的集合呢?我再来举个栗子~:
 
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型得到Name:"+this.name);
}
var per=new Person("alin",21);
per.sayHello(); //输出:使用原型得到Name:alin

   

在函数Person里面自定义了属性name和age,而prototype是我们的属性集合,也就是说,我要添加sayHello这个属性到Person,则要这样写:Person.prototype.sayHello,就能添加Person的属性。

(我们可以简单的把prototype看做是一个模板,新创建的自定义对象都是这个模板prototype的一个拷贝,其实准确来说,不应该说是一个拷贝,而是一个连接,只不过这种链接是不可见,新实例化的对象内部有一个看不见的_Proto_指针,指向原型对象)。

使用原型来优化代码:

普通code:
function add(x,y){
return x+y;
}
function subtract(x,y){
return x-y;
}
console.log(add(1,3));

  

第一种方式用原型优化后:
var Calculator = function(){

};
Calculator.prototype = {
add:function(x,y){
return x+y;
},
subtract:function(x,y){
return x-y;
}
};
console.log((new Calculator()).add(1,3));
第二种方式用原型优化后:
var Calculator = function () {};
Calculator.prototype = function(){
add = function(x,y){
return x+y;
},
subtract = function(x,y){
return x-y;
}
return{
add:add,
subtract:subtract
}
}(); console.log((new Calculator()).add(1,3));

  

它目的:封装私有的function,通过return的形式暴露出简单的使用名称,以达到public/private的效果。
 
----------------------------------------------------------------------------------华丽的分割线-------------------------------------------------------------------------------------------

js原型链

问题:什么是原型链?
根据《JavaScript高级程序设计》P162页可以作出回答:原型链是实现继承的主要方法。其基本思想是:利用原型让一个引用类型继承另一个应用类型的属性和方法。
简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。
 
 
首先,我觉得有必要先解释一下prototype 和_proto_之间的关系。
每一个基本对象都有自己的_proto_属性,而每一个函数对象都有自己的prototype原型(函数对象也属于基本对象,所以也有_proto_),每当去定义一个prototype的时候,就相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型。 我们还是来看图吧~比较清晰:
var foo = {
x: 10,
y: 20
};

  

解析:当你定义一个函数对象的时候,其内部就有这样一个链表关系。声明foo对象,自带了_proto_的属性,而这个属性指向了prototype,从而实现对象的扩展(例如继承等操作)。

再看一个栗子:

var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 20,
__proto__: a
}; var c = {
y: 30,
__proto__: a
}; b.calculate(30); // 60

  

附上另外说明:

1、一个没有继承操作的函数的_proto_都会指向Object.prototype,而Object.prototype都会指向null。

2、所以,也可以很明显知道,为何null是原型链的终端。

理解了__proto__这个属性链接指针的本质。。再来理解constructor。

prototype默认的有一个叫做constructor的属性,指向这个函数本身。
一般construtor就是我们平时对函数设置的实例化对象

如上图:SuperType是一个函数,下面包括他的原型对象prototype,原型对象指向了构造函数的指针,而构造函数指回像了原型对象的内部指针,这样就形成了链式关系了。
就是说,当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的一行代码:
this.prototype = {constructor:this};
这个prototype对象是存放继承特征的地方。因为js没有提供一个方法去确定哪个函数是打算用来做构造器,所以每个函数都会得到一个prototype对象。constructor属性没有什么用,重要的是prototype对象。

实现原型链有一种基本模式,其代码大致如下:

function A(){
this.Aproperty = "111";
} A.prototype.getA = function(){
return this.Aproperty;
}; function B(){
this.Bproperty = "222";
} B.prototype = new A();//B继承A
B.prototype.getB = function(){
return this.Bproperty;
}; var C = new B();
console.log(C.getA());//111

  

以上定义了两个类型A和B。每个类型分别有一个属性和一个方法。它们的主要区别是B继承了A,而继承是通过创建A的实例,并将实例赋给B.prototype实现的。实现的本质是重写原型的对象,代之以一个新的类型的实例。换句话说,原来存在于A的实例中的所有属性和方法,现在也存在于B.prototype中了。在确立了继承关系之后,我们给B.prototype添加了一个方法,这样就继承A的属性和方法的基础上又添加了一个新方法。
如图:

另外一个很重要的链式继承模式

function A(x){
  this.x = x;
}
A.prototype.a = "a";
function B(x,y){
  this.y = y;
  A.call(this,x);
}
B.prototype.b1 = function(){
  alert("b1");
}
B.prototype = new A();
B.prototype.b2 = function(){
  alert("b2");
}
B.prototype.constructor = B;
var obj = new B(1,3);

  

   就是说把B的原型指向了A的1个实例对象,这个实例对象具有x属性,为undefined,还具有a属性,值为"a"。所以B原型也具有了这2个属性(或者说,B和A建立了原型链,B是A的下级)。而因为方才的类继承,B的实例对象也具有了x属性,也就是说obj对象有2个同名的x属性,此时原型属性x要让位于实例对象属性x,所以obj.x是1,而非undefined。第13行又定义了原型方法b2,所以B原型也具有了b2。虽然第9~11行设置了原型方法b1,但是你会发现第12行执行后,B原型不再具有b1方法,也就是obj.b1是undefined。因为第12行使得B原型指向改变,原来具有b1的原型对象被抛弃,自然就没有b1了。

  第12行执行完后,B原型(B.prototype)指向了A的实例对象,而A的实例对象的构造器是构造函数A,所以B.prototype.constructor就是构造对象A了(换句话说,A构造了B的原型)。

alert(B.prototype.constructor)出来后就是"function A(x){...}" 。同样地,obj.constructor也是A构造对象,alert(obj.constructor)出来后就是"function A(x){...}" ,也就是说B.prototype.constructor===obj.constructor(true),但是B.prototype===obj.constructor.prototype(false),因为前者是B的原型,具有成员:x,a,b2,后者是A的原型,具有成员:a。如何修正这个问题呢,就在第16行,将B原型的构造器重新指向了B构造函数,那么B.prototype===obj.constructor.prototype(true),都具有成员:x,a,b2。

  如果没有第16行,那是不是obj = new B(1,3)会去调用A构造函数实例化呢?答案是否定的,你会发现obj.y=3,所以仍然是调用的B构造函数实例化的。虽然obj.constructor===A(true),但是对于new B()的行为来说,执行了上面所说的通过构造函数创建实例对象的3个步骤,第一步,创建空对象;第二步,obj.__proto__ === B.prototype,B.prototype是具有x,a,b2成员的,obj.constructor指向了B.prototype.constructor,即构造函数A;第三步,调用的构造函数B去设置和初始化成员,具有了属性x,y。虽然不加16行不影响obj的属性,但如上一段说,却影响obj.constructor和obj.constructor.prototype。所以在使用了原型继承后,要进行修正的操作。

  关于第12、16行,总言之,第12行使得B原型继承了A的原型对象的所有成员,但是也使得B的实例对象的构造器的原型指向了A原型,所以要通过第16行修正这个缺陷。

文章说明:个人查看各种资料,原创所得,观点不一定准确,欢迎各路大牛勘误,小女子感激不尽。

JavaScript原型,原型链 !的更多相关文章

  1. Javascript的原型链图

    90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...

  2. javascript 之原型、原型链-14

    原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...

  3. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  4. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  5. 三张图搞懂JavaScript的原型对象与原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...

  6. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  7. [转]浅谈 JavaScript的原型对象与原型链

    看到这篇文章写的很好,转过来以便今后阅读. 原文地址:http://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼 ...

  8. JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。

    回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...

  9. javascript prototype原型链的原理

    javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...

  10. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

随机推荐

  1. eclipse提交hadoop集群跑程序

    在eclipse下搭建hadoop后,测试wordcount程序,右击 Run on hadoop 程序跑成功后,发现“INFO - Job job_local401325246_0001 compl ...

  2. c#0银行存款计算器

    简介: 为银行存款客户提供一个超级计算器,简单直观操作界面,提供一个银行本意到期金额结算查询程序,方便用户选择存款方式. 功能截图: 实验步骤:利用工具栏建造窗体设计如图: 1.建立2个GroupBo ...

  3. STM8S和STM8L调试串口中断的注意点

    1. STM8L串口中断注意点 在调试PM2.5传感器GP2Y1051的时候,发现在仿真的时候开始能够进行数据的接受,但是如果暂停之后就不能接受数据,其实只是接收了一次完整的数据. 问题程序 解决方法 ...

  4. centos 安装php

    1.yum安装 yum install php php-fpm php-common php-gd php-mcrypt php-pear php-pecl-memcache php-mhash ph ...

  5. DEV XtraGrid绑定非绑定列(转)

      在Gridview创建一列 .将该列的UnboundType属性设置为bound(默认值)以外的数据类型 为该列设置一个窗体内全局唯一的FieldName,注意这个FieldName甚至不能出现在 ...

  6. 一些 CSS 框架

    利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...

  7. PHPCMS V9二次开发便捷自定义后台入口文件夹

    phpcms v9二次开发便捷自定义后台入口文件夹 最新发布的phpcms v9由于采用了mvc的设计模式,所以它的后台访问地址是固定的,虽然可以通过修改路由配置文件来实现修改,但每次都修改路由配置文 ...

  8. Java was started but returned exit code=13

    安装Eclipse(32位)后打开报错:Java was started but returned exit code=13 解决方法: 1,首先我查看了我当前安装的JDK版本,发现是64位的: 2, ...

  9. UIBezierPath

    UIBezierPath 笔者在写本篇文章之前,也没有系统学习过贝塞尔曲线,只是曾经某一次的需求需要使用到,才临时百度看了一看而且使用最基本的功能.现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞 ...

  10. 深入理解querySelector(All)

          querySelector和querySelectorAll同属于Selectors API Level 1规范,该规范早在2006年就已经开始发展,并在2007年10月形成querySe ...