JavaScript原型和继承的学习笔记

前几天看了《再谈js面向对象编程》,当时就请教哈大神,发现文章有的地方可能会造成误导(或者说和ECMA有出入),后来自己翻一翻ECMA,总算找到“标准”的理解……

本文适合初学者,特别是对构造函数、原型和原型链概念比较模糊的,大牛请路过,好了,让我们一步步来看看 Javascript原型(链)到底有多神秘……

一、函数创建过程

在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子:
function A() {};
当我们在代码里面声明这么一个空函数,js解析的本质是(肤浅理解有待深入):
1、创建一个对象(有constructor属性及[[Prototype]]属性),根据ECMA,其中[[Prototype]]属性不可见、不可枚举
2、创建一个函数(有name、prototype属性),再通过prototype属性 引用 刚才创建的对象
3、创建变量A,同时把函数的 引用 赋值给变量A

如下图所示:

(注意图中都是“ 引用 ”类型)

每个函数的创建都经历上述过程。

二、构造函数

那么什么是构造函数呢?
按照ECMA的定义
Constructor is a function that creates and initializes the newly created object.
构造函数是用来新建同时初始化一个新对象的函数。
什么样的函数可以用来创建同时初始化新对象呢?答案是:任何一个函数,包括空函数。
所以,结论是:任何一个函数都可以是构造函数。

三、原型

根据前面空函数的创建图示,我们知道每个函数在创建的时候都自动添加了prototype属性,这就是函数的原型,从图中可知其实质就是对一个对象的引用(这个对象暂且取名原型对象)。
我们可以对函数的原型对象进行操作,和普通的对象无异!一起来证实一下。
围绕刚才创建的空函数,这次给空函数增加一些代码:
function A() {
    this.width = 10;
    this.data = [1,2,3];
    this.key = "this is A";
}
A._objectNum = 0;//定义A的属性
A.prototype.say = function(){//给A的原型对象添加属性
    alert("hello world");
}

第7~9行代码就是给函数的原型对象增加一个say属性并引用一个匿名函数,根据“函数创建”过程,图解如下:

(灰色背景就是在空函数基础上增加的属性)
简单说原型就是函数的一个属性,在函数的创建过程中由js编译器自动添加。
那么原型有什么用呢?
先了解下new运算符,如下:

var a1 = new A;
var a2 = new A;

这是通过构造函数来创建对象的方式,那么创建对象为什么要这样创建而不是直接var a1 = {};呢?这就涉及new的具体步骤了,这里的new操作可以分成三步(以a1的创建为例):
1、新建一个对象并赋值给变量a1:var a1 = {};
2、把这个对象的[[Prototype]]属性指向函数A的原型对象:a1.[[Prototype]] = A.prototype
3、调用函数A,同时把this指向1中创建的对象a1,对对象进行初始化:A.apply(a1,arguments)
其结构图示如下:

从图中看到,无论是对象a1还是a2,都有一个属性保存了对函数A的原型对象的引用,对于这些对象来说,一些公用的方法可以在函数的原型中找到,节省了内存空间。
 
四、原型链

了解了new运算符以及原型的作用之后,一起来看看什么是[[Prototype]]?以及对象如何沿着这个引用来进行属性的查找?
在js的世界里,每个对象默认都有一个[[Prototype]]属性,其保存着的地址就构成了对象的原型链,它是由js编译器在对象 被创建 的时候自动添加的,其取值由new运算符的右侧参数决定:当我们var object1 = {};的时候,object1的[[Prototype]]就指向Object构造函数的原型对象,因为var object1 = {};实质上等于var object = new Object();(原因可参照上述对new A的分析过程)。
对象在查找某个属性的时候,会首先遍历自身的属性,如果没有则会继续查找[[Prototype]]引用的对象,如果再没有则继续查找[[Prototype]].[[Prototype]]引用的对象,依次类推,直到[[Prototype]].….[[Prototype]]为undefined(Object的[[Prototype]]就是undefined)
如上图所示:
//我们想要获取a1.fGetName
alert(a1.fGetName);//输出undefined
//1、遍历a1对象本身
//结果a1对象本身没有fGetName属性
//2、找到a1的[[Prototype]],也就是其对应的对象A.prototype,同时进行遍历
//结果A.prototype也没有这个属性
//3、找到A.prototype对象的[[Prototype]],指向其对应的对象Object.prototype
//结果Object.prototype也没有fGetName
//4、试图寻找Object.prototype的[[Prototype]]属性,结果返回undefined,这就是a1.fGetName的值
简单说就是通过对象的[[Prototype]]保存对另一个对象的引用,通过这个引用往上进行属性的查找,这就是原型链。
 
五、继承

有了原型链的概念,就可以进行继承。
function B() {};
这个时候产生了B的原型B.prototype
原型本身就是一个Object对象,我们可以看看里面放着哪些数据
B.prototype 实际上就是 {constructor : B , [[Prototype]] : Object.prototype}
因为prototype本身是一个Object对象的实例,所以其原型链指向的是Object的原型
B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype;这样只是继承了A的prototype方法,A中的自定义方法则不继承
B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype

但是我们只想把B的原型链指向A,如何实现?
第一种是通过改变原型链引用地址
B.prototype.__proto__ = A.prototype;
ECMA中并没有__proto__这个方法,这个是ff、chrome等js解释器添加的,等同于EMCA的[[Prototype]],这不是标准方法,那么如何运用标准方法呢?
我们知道new操作的时候,实际上只是把实例对象的原型链指向了构造函数的prototype地址块,那么我们可以这样操作
B.prototype = new A();
这样产生的结果是:
产生一个A的实例,同时赋值给B的原型,也即B.prototype 相当于对象 {width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype}
这样就把A的原型通过B.prototype.[[Prototype]]这个对象属性保存起来,构成了原型的链接
但是注意,这样B产生的对象的构造函数发生了改变,因为在B中没有constructor属性,只能从原型链找到A.prototype,读出constructor:A
var b = new B;
console.log(b.constructor);//output A
所以我们还要人为设回B本身
B.prototype.constructor = B;
//现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}
console.log(b.constructor);//output B
//同时B直接通过原型继承了A的自定义属性width和name
console.log(b.data);//output [1,2,3]
//这样的坏处就是
b.data.push(4);//直接改变了prototype的data数组(引用)
var c = new B;
alert(c.data);//output [1,2,3,4]
//其实我们想要的只是原型链,A的自定义属性我们想在B中进行定义(而不是在prototype)
//该如何进行继承?
//既然我们不想要A中自定义的属性,那么可以想办法把其过滤掉
//可以新建一个空函数
function F(){}
//把空函数的原型指向构造函数A的原型
F.prototype = A.prototype;
//这个时候再通过new操作把B.prototype的原型链指向F的原型
B.prototype = new F;
//这个时候B的原型变成了{[[Prototype]] : F.prototype}
//这里F.prototype其实只是一个地址的引用
//但是由B创建的实例其constructor指向了A,所以这里要显示设置一下B.prototype的constructor属性
B.prototype.constructor = B;
//这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}
//这样就实现了B对A的原型继承
图示如下,其中红色部分代表原型链:

作为初学者浅陋的理解,本文目的在于更具象地去理解js的面向对象,疏漏之处请指正

时间: 2024-07-31 09:11:23

JavaScript原型和继承的学习笔记的相关文章

JavaScript 原型与继承说明_js面向对象

function A(x) { this.x = x; } alert(A.prototype); alert(A.prototype.constructor); 根据弹出的结果,我们可以得到:原型对象是由函数的构造函数创建,它所拥有的属性能被所有对象共享,初始时原型对象指向一个Object对象,并且定义了一个constructor属性,该属性指向定义该原型对象的构造函数本身,再看如下代码. Code function A(x) { A.prototype.x = x; } var obj =

JavaScript权威设计--JavaScript表达式与运算符(简要学习笔记五)

1.3种原始表达式     1.直接量:    1.23    //数字直接量                         "hello"    //字符串直接量                         ...     2.保留字构成的原始表达式:         true    //返回布尔值:真         false    //假         null    //返回一个值:空     3.变量:         i    //返回变量i的值        

某人初学javascript的时候写的学习笔记_javascript技巧

复制代码 代码如下: /* * JavaScript对象就是一组属性(方法)的集合 * 在该语言中如果变量名或方法名不符合声明规范, * 则一定得用方括号" [] "引用它 * */ /** * <1.>该语句声明了一个class1类,class1相当于构造方法,又叫构造器 * 也可说声明了一个class1方法 */ function class1(){ this.name="xjl"; //给对象添加属性 this.say= function(){al

JavaScript原型和继承

那么原型有什么用呢? 先了解下new运算符,如下: var a1 = new A; var a2 = new A; 这是通过构造函数来创建对象的方式,那么创建对象为什么要这样创建而不是直接var a1 = {};呢?这就涉及new的具体步骤了,这里的new操作可以分成三步(以a1的创建为例): 1.新建一个对象并赋值给变量a1:var a1 = {}; 2.把这个对象的[[Prototype]]属性指向函数A的原型对象:a1.[[Prototype]] = A.prototype 3.调用函数A

JavaScript原型和继承用法详解

一.函数创建过程 在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子: function A() {}; 当我们在代码里面声明这么一个空函数,js解析的本质是(肤浅理解有待深入): 1.创建一个对象(有constructor属性及[[Prototype]]属性),根据ECMA,其中[[Prototype]]属性不可见.不可枚举 2.创建一个函数(有name.prototype属性),再通过prototype属性 引用 刚才创建的对象 3.创建变量A,同时把函数的 引

JavaScript中函数的参数学习笔记

 我们之前写的函数并没有给它传参,其实所谓的传参就是将参数传给函数,然后函数在内部做一些处理,那么如何给参数传参呢,其实函数后面的括号里面就是放参数的,下面举个例子:  代码如下 复制代码 function sum(a, b) {  alert(a+b); } sum(12, 5); 上面的函数中,给sum设置了2个参数a和b,当调用sum时,传递了2个参数给函数,这时a就变为了12,b就变为了5,函数体内的也要变.a和b就起到一个占位符的作用,就好像你和同学去食堂打饭,突然想到早上吃饭看见饭卡

javascript简单性能问题及学习笔记

 最近在看一本书:<高性能javaScript>,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧 1.<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染  2.<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行

JavaScript权威设计--JavaScript类型,值,变量(简要学习笔记三)

1.负号是一元求反运算 如果直接给数字直接量前面添加负号可以得到他们的负值     2.JavaScript中的运算超出了最大能表示的值不会报错,会显示Infinity. 超出最小也不报错,会显示-Infinity. 运算出的结果如果是个非数字的值得时候,用NaN表示.   3.字符串直接量拆分成数行 ECMAScript3中,字符串直接量必须下载一行中,而在ECMScript中,字符串直接量可以拆分成数行,每行必须以反斜线(\)介绍. 如:"two\lines"       &quo

javascript简单性能问题及学习笔记_javascript技巧

1.<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染 2.<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行的时候,都会下载对应的js文件,浏览器会等待所有js/css下载完成才显示出页面 3.当需要导入多个js文件的时候,一般情况下我们都是写两个<script src="..." />,实际