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 = new A(10);
alert(obj.x);
alert(obj.constructor); 

因为原型对象的所有属性能被构造函数创建对象共享,所以创建的对象可以访问这里的constructor属性,同时obj对应的就是原型对象(prototype)所创建出来的一个实例,那么重写constructor属性会出现什么样的结果呢?

Code

function A(x)
{
A.prototype.x = x;
} 

var objA = new A(10);
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 };
objA.constructor();
alert(objA.x); 

var objB = new A(10);
alert(objB.x);

根据结果我们可以看到,首先弹出的是“重写obj的constructor属性”,然后弹出20,在弹出10,可见,我们在书写重写objA这个对象的constructor之后,objB并没有被改变,因此无论在一个对象加入或修改多少属性这都不影响其原型对象中属性的本来面目,其实很容易理解js为什么这样做,因为一个对象的行为不能影响到其他对象,否则将会造成混乱。

在这里,我们可以总结一下,上面代码的规则:

1.当我们调用某个对象的时候,首先检查该对象本身的自己定义的属性,如果存在则调用。

2.当自己本身的属性不存在的时候,则调用其构造函数所定义的原型对象的引用。

那么根据这个规则,就形成了JavaScript中的一个原型链,我们就可以根据这个规则来定义继承关系。

function A(x)
{
A.prototype.x = x;
} 

function B(x,y)
{
B.prototype.y = y;
A.call(this,x);
}

这段代码显示了两个函数,B函数继承与A函数,A.call(this.x)表示,将B的对象this传递到A函数中进行执行。然后,我们同样需要由B函数构造出来的对象需要包含A函数的所有特性,因此需要加上这么一句话。

复制代码 代码如下:

B.prototype = new A();
alert(B.prototype.constructor);

先我们指定B的原型为A,因此,B函数继承了A函数的特性,根据弹出的结果,我们可以看到,其constructor指向的是A函数,那么我们的B函数的特性是不是丢失了呢?因此,我们需要在加上一句话,最后给出继续的整合代码。

function A(x)
{
A.prototype.x = x;
A.prototype.ShowA = function(){ alert("A的Show方法!"); };
} 

function B(x,y)
{
B.prototype.y = y;
A.call(this,x);
B.prototype.ShowB = function(){ alert("B的Show方法!"); };
} 

B.prototype = new A();
B.prototype.constructor = B; 

var obj = new B(10,5);
alert(obj.x);
alert(obj.y);
obj.ShowA();
obj.ShowB();

若有疑问或不正之处,欢迎提出指正和讨论。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索继承
原型
js面向对象 原型继承、javascript 原型继承、javascript原型链继承、javascript的原型继承、javascript原型和继承,以便于您获取更多的相关知识。

时间: 2024-09-17 13:55:33

JavaScript 原型与继承说明_js面向对象的相关文章

JavaScript原型和继承的学习笔记

前几天看了<再谈js面向对象编程>,当时就请教哈大神,发现文章有的地方可能会造成误导(或者说和ECMA有出入),后来自己翻一翻ECMA,总算找到"标准"的理解-- 本文适合初学者,特别是对构造函数.原型和原型链概念比较模糊的,大牛请路过,好了,让我们一步步来看看 Javascript原型(链)到底有多神秘-- 一.函数创建过程 在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子: function A() {}; 当我们在代码里面声明这么一个空

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中的运用上部_js面向对象

其实,面向对象的思想是独立于编程语言的,例如在C#中,在一个静态类的静态方法中,按照过程式开发调用一系列静态函数,我们很难说这是面向对象的编程,相反,象jquery和extjs这样优秀的javascript库,却处处体现着面向对象的设计思想.本文不打算探讨javascript是否能够算做面向对象的编程语言,这个问题是重视中国式考试的人应该关注的,我这里只是简单的说明如何在javascript中使用面向对象的编程思想. 面向对象首先要有对象.在javascript中创建一个对象非常简单: 复制代码

JS继承 笔记_js面向对象

JS继承 JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来 模拟面向对象语言中的继承. 在JS中模拟继承有多种方式,其中寄生组合模式是一种比较容易简单的模拟继承模式,下面我们就来 介绍一下用寄生组合模式模拟继承. JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现. 1属性的继承 属性的继承通过改变函数的执行环境来实现的.而改变函数的执行环境可以使用call()和apply()两种 方法来实现. 我们首先创建一个Animal"类&

JavaScript 类的定义和引用 JavaScript高级培训 自定义对象_js面向对象

一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

JavaScript 设计模式 安全沙箱模式_js面向对象

命名空间 JavaScript本身中没有提供命名空间机制,所以为了避免不同函数.对象以及变量名对全局空间的污染,通常的做法是为你的应用程序或者库创建一个唯一的全局对象,然后将所有方法与属性添加到这个对象上. 复制代码 代码如下: /* BEFORE: 5 globals */ // constructors function Parent() {} function Child() {} // a variable var some_var = 1; // some objects var mo

javascript 写类方式之四_js面向对象

4.构造函数 + 原型 直接组装一个类:同一构造函数将组装出同一类型通过前面几篇得知javascript写类无非基于构造函数 和原型 .既然这样,我们写个工具函数来写类. 复制代码 代码如下: /** * $class 写类工具函数之一 * @param {Object} constructor * @param {Object} prototype */ function $class(constructor,prototype) { var c = constructor || functi

javascript 写类方式之五_js面向对象

5.用 构造函数+原型 定义一个类:同一构造函数可以定义出多个类型 复制代码 代码如下: /** * $define 写类工具函数之二 * @param {Object} constructor * @param {Object} prototype */ function $define(constructor,prototype) { var c = constructor || function(){}; var p = prototype || {}; return function()