原型原型链学习记录

这是一篇学习笔记。

个人心得:

关于原型和原型链这一块,很难,但是,一旦理解,就通了。

对于这一块,我之前不懂的时候,非要去弄明白,特别痛苦,之后,看到了王福朋老师的闭包原型系列,真的是茅塞顿开!看完之后,我就拿起JavaScript高程3,高程3第6章节,耐心跟着看也就明白了。之后,再去做一些图解,如果能够根据继承画出所有的关系,没有矛盾的点,那就基本没问题了。再到网上找差不多的文章看,如果没有冲突点,那这一块就没问题了。

参考的内容:

http://www.cnblogs.com/wangfupeng1988/p/4001284.html ---王福朋的闭包原型系列

你不知道的JavaScript   上

JavaScript高级程序设计  3

  内容:

    一些名词的解释 +几个图解 。

    1:简单的实例

    2:完整的实例

    3:重写原型对象

    4:原型继承

原型/继承

JavaScript中的对象都有一个内置属性 [[prototype]]属性。在表示的时候可以用__proto__表示。

  __proto__ : 每个对象都有这样一个属性,指向该对象的构造函数的prototype的指向

所有原型链的最后指向都是null。

除了Object.create(),无实参直接创建的对象的原型是null/没有原型,即不继承任何属;其余的对象的原型链上null之前都有一个Object.prototype原型对象。

Object的prototype对象的[[prototype]]内部属性的值是null。即:Object.prototype.__proto__  === null //true。

  所有通过对象直接量创建的对象都有一个共同的原型对象:Object.prototype

通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性所指向的对象。

(当通过new和构造函数生成实例,实例的原型对象就会锁定)。

JavaScript中的内建函数以及用户自定义函数都是通过Function 这个函数创建的

所有的函数默认都会拥有一个名为prototype的不可枚举的属性。这个属性指向一个对象,被称为这个函数的原型对象。

每个原型有一个不可枚举的属性constructor。这个属性引用的是对象关联的函数,即constructor属性的值是一个函数对象。

Function是由它自己创建的,所以:

new 调用构造函数的一个重要特征

构造函数的prototype属性值被用做新对象的原型。即通过同一个构造函数创建的对象都继承自同一个对象。

instanceof :左边走__proto__,右边走prototype,如果能重合,返回true,否则,返回false。

使用new的构造函数调用会生成prototype和constructor引用。

如何理解函数,对象,实例,原型,构造函数之间的关系,图解是非常好的方式,所谓有图有真相。

可以通过原型链(通过__proto__串在一起的原型形成了一条链)把它们串在一起理解。

1:

function Foo(){ /*...*/}
var a1=new Foo();
var a2=new Foo();

这是一个非常简单的构造函数和实例对象。

这样,它们的关系图就出来了。

  实例a1,函数Foo,原型Foo.prototype,都是对象

  函数Foo有一个prototype属性,指向一个对象,名为Foo.prototype,成为Foo的原型对象

  原型对象Foo.prototype 有一个constructor属性,指向该对象关联的函数

  实例a1有一个__proto__,指向该实例的构造函数的prototype的指向

这个图是比较基本的。

2:

对象都有[[prototype]]属性,属性值为该对象构造函数的prototype值。

3重写原型对象 :

function Foo(){/*...*/}
var a1=new Foo();  //用new调用之后就会锁定原型
Foo.prototype={/*...*/}; //创建一个新原型对象,重写Foo的prototype
var a2=new Foo();

图3:

注:

新的Foo.prototype 就是Object的实例。

旧的Foo.prototype 不会消失,依然会存在。

     Foo.prototype.constructor === Object; //true

     a2.constructor === Object; //true

但是,实际上Foo.prototype和a2都没有constructor属性,它们都是继承自Object.prototype

4:继承

function SuperType(){
    this.property=true;
}
SuperType.prototype.getSuperValue=function(){
    return this.property;
};
function SubType(){
    this.subproperty=false;
}
SubType.prototype=new SuperType(); //继承自SuperType /重写了原型

SubType.prototype.getSuperValue=function(){
    return this.subproperty;
};
var instance=new SubType();

以上就是我的理解,如果有错误,还请各位前边指正,谢谢。

时间: 2024-10-10 15:11:49

原型原型链学习记录的相关文章

区块链学习记录

[深度]终于把区块链的技术与应用讲清楚了(57张PPT) bitcoin 比特币源码学习笔记(一) VC编译调试比特币源码 以太坊官网 以太坊Github 以太坊go-ethereum项目源码本地环境搭建

JavaScirpt中的原型,原型对象和原型链

一.什么是原型呢? 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象.(即prototype即为函数的原型该原型指向的是一个原型对象) 二.什么是原型对象呢? 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象(即原型对象).而这个对象的用途是包含 可以由特定类型的所有 实例 共享的属性和方法.(字面意思prototype就是通过调用构造函数而创建的实例对象的原型对象) 使用原型对象的好处是可以让所有的对象实例(实

面向对象(2 )构造函数 原型 原型链的理解

面向对象(2) 原型 原型链的理解 1.面向对象的目的就是生成对象object. 2.生成对象的方式 (1)单例模式(字面量定义)var obj={} (2)类的实例 var obj=new Object() (3)工厂模式 (4)构造函数 工厂模式和构造函数的区别? 工厂模式,生成的对象必须要返回,构造函数模式不用return,构造函数模式默认return旳是this,在构造函数内的this就是实例对象. 构造函数如果人为return的不是对象,直接忽略,如果人为return的是对象,就取代t

好程序员前端教程面对对象与原型原型链

好程序员前端教程面对对象与原型原型链一.面向对象:面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性.重用性和扩展性.对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体.再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类.即对象的抽象是类,类的实例是对象.在面向对象的编程中,把用类创建对象的过程称为实例化.面向过程与面向对象的区别在于面向过程是一种直接的编程方法,它是按照编程语言的思路考虑

JavaScript原型&原型链

原型&原型对象 先来一段简单的代码: function Fun(name) { this.name = name } var obj = new Fun('obj') JavaScript中的对象都有一个[[Prototype]]内置属性(即部分浏览器实现的__proto__属性),这是一个访问器属性,通过这个可以访问对象的[[Prototype]]:对象就是以这个属性为模板,来"继承"方法和属性. JavaScript中的方法都有一个prototype属性,有一个constr

原型原型链理解

由来 js是基于原型的语言,没有类的概念,为了描述联系对象和对象之间的关系就有了原型和原型链. 原型 原型(prototype)就是模板,本质也是一个对象,它定义了构造函数构造出来的对象可以继承该原型的属性和方法,用于表示对象之间的关系.每个函数都有一个prototype属性,这个属性指向的就是原型对象:实例上有一个__proto__指向它的构造函数的原型对象. 特点 prototype只有函数有,对象没有 原型链 定义 每个对象上拥有一个__proto__属性指向原型对象,对象以其原型为模板,

JavaScript ES5类 原型 原型链 组合、原型、寄生式继承

ES5类 原型  原型链 继承 JavaScript中,原型是相对于构造函数(类)的叫法(或者说概念),原型链是相对于构造函数(类)的实例对象的叫法. 对于JavaScript对象,如果在对象自身上找不到该属性,那么就会向上沿着原型链继续查找该属性 创建一个ES5类 在ES5中,类是由函数名首字母大写的函数,通过关键字new创建的. 类的构造函数就是函数自身 一般情况下,ES5类的原型对象prototype是自身构造函数,该类的实例化对象的原型链对象__proto__也是该构造函数,这二者指向同

JavaScript学习记录day2

JavaScript学习记录day2 学习 javascript JavaScript学习记录day2 1.1 数据类型 1.2 变量 1.1.1 Number 1.1.2 字符串 1.1.3 布尔值 1.1.4 比较运算符 1.1.5 null和undefined 1.1.6 数组 1. 数据类型和变量 1. 数据类型和变量 1.1 数据类型 1.1.1 Number JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型: 123; // 整数1230

Windows API 编程学习记录<三>

恩,开始写API编程的第三节,其实马上要考试了,但是不把这节写完,心里总感觉不舒服啊.写完赶紧去复习啊       在前两节中,我们介绍了Windows API 编程的一些基本概念和一个最基本API函数 MessageBox的使用,在这节中,我们就来正式编写一个Windows的窗口程序. 在具体编写代码之前,我们必须先要了解一下API 编写窗口程序具体的三个基本步骤:             1. 注册窗口类:             2.创建窗口:             3.显示窗口: 恩,