`
wangdongsong
  • 浏览: 35956 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JavaScript面向对象的继承的几种方式

 
阅读更多

看了一些资料和视频,有五种方式实现继承,代码如下:

 

/**
 * 继承的五种方法
 * @author wangds
 *
 *
 * 1.call方法
 * call方法是Function对象中的方法,因此我们定义的每一个函数都拥有该方法。
 * 可以通过函数名来调用call方法,call方法的第一个参数会被传递函数中的this
 * 从第二个参数开始,逐一赋值给函数中的参数
 * @param {Object} username
 */
function Parent(username){
	this.username = username;
	this.sayHello = function(){
		alert(this.username);
	}
}

function Child(username, password){
	Parent.call(this,username);
	this.password = password;
	
	this.sayWorld = function(){
		alert(this.password);
	}
}

var parent = new Parent("wds");
var child = new Child("zzh","you amd me");

parent.sayHello();

child.sayWorld();
child.sayHello();

/**
 * 2.apply
 */
function ParentApply(username){
	this.username = username;
	this.sayHello = function(){
		alert("ParentApply.sayHello:" + this.username);
	}
}
function ChildApply(username, password){
	ParentApply.apply(this, new Array(username));
	this.password = password;
	
	this.sayWorld = function(){
		alert("ChildApply.sayWorld:" + this.password);
	}
}
var p = new ParentApply("wds");
var c = new ChildApply("zzh", "pass");
p.sayHello();

c.sayWorld();
c.sayHello();

/**
 * 3.原型链
 */
function ParentProto(){}

ParentProto.prototype.hello = "Wds Hello";
ParentProto.prototype.sayHello = function(){
	alert(this.hello);
}

function ChildProto(){}

ChildProto.prototype = new ParentProto();
ChildProto.prototype.world = "wrp World";
ChildProto.prototype.sayWorld = function(){
	alert(this.world);
}

var child = new ChildProto();
child.sayHello();
child.sayWorld();

/**
 * 4.混合式
 */
function ParentMix(hello){
	this.hello = hello;
}
ParentMix.prototype.sayHello = function(){
	alert(this.hello);
}

function ChildMix(hello, world){
	ParentMix.call(this, hello);
	this.world = world;
}
ChildMix.prototype.sayWorld = function(){
	alert(this.world);
}

var childMix = new Child("Hello Mix", "World Mix");
childMix.sayHello();
childMix.sayWorld();

/**
 * 5.对象冒充
 */
function ParentFirst(username){
	this.username = username;
	
	this.sayHello = function(){
		alert(this.username);
	}
}

function ChildFirst(username, password){
	this.method = ParentFirst;
	this.method(username);
	delete this.method;
	
	this.password = password;
	
	this.sayWorld = function(){
		alert(this.password);	
	}
}

var firstParent = new ParentFirst("first Parent");
var firstChild = new ChildFirst("firstChild","firstPassword");

firstParent.sayHello();

firstChild.sayHello();
firstChild.sayWorld();

 

分享到:
评论

相关推荐

    JavaScript实现继承的几种方式

    本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被...

    JAVASCRIPT 面向对象编程精要

    本文介绍了JavaScript面向对象编程的基本概念和技术细节,包括变量和对象的基础用法、函数的作用以及如何通过封装和继承来构建复杂的对象层次结构。JavaScript的独特之处在于它的灵活性和动态性,这使得它成为了一种...

    JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf

    从所提供的文件信息中,我们可以总结以下几点与“JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf”相关的重要知识点。 首先,该文件提到的书籍是关于JavaScript面向对象编程的,面向对象编程...

    JavaScript面向对象的支持

    JavaScript是一种广泛应用于Web开发的脚本语言,它虽然支持面向对象编程,但其面向对象的实现方式与其他传统面向对象语言(如Java或C++)有所不同。JavaScript中的面向对象特性主要体现在以下几个方面: 1. **基于...

    JavaScript面向对象程序设计

    在JavaScript面向对象编程中,随着Web2.0和Ajax技术的普及,JavaScript的角色从简单的表单验证扩展到了复杂的数据交互和页面动态更新。采用面向对象的编程风格可以使代码结构更加清晰,便于管理和维护。例如,...

    javascript 经典面向对象设计

    在JavaScript中实现面向对象编程主要包括以下几个方面: - **类与对象**:JavaScript没有内置的类的概念,但在ES6中引入了`class`关键字来模拟类的行为。对象则是由类实例化出来的具体实体。 - **封装**:封装是指...

    javascript面向对象教程

    JavaScript的面向对象特性主要体现在以下几个方面: 1. **构造函数与原型**:函数在JavaScript中可以作为构造函数,通过`new`关键字创建新对象。构造函数的`prototype`属性允许对象共享方法和属性,实现继承。通过`...

    javascript面向对象特性代码实例

    在本篇文章中,作者详细阐述了JavaScript面向对象编程的几个关键特性,并通过代码示例展示了这些特性的具体应用。首先,我们来了解几个核心概念:类、静态成员、对象和重载。 类在面向对象编程中扮演着基础的角色,...

    javascript面向对象编程

    此外,ES6引入了类的概念和类式继承,提供了一种更接近传统面向对象语言的继承方式。 4. **多态**:JavaScript通过函数的动态绑定和方法重写实现多态,允许不同对象对同一消息作出不同的响应。 5. **构造函数和...

    JavaScript学习深入—面向对象编程

    通过这种方式,JavaScript支持继承、封装和多态等面向对象编程的核心概念。 - **构造函数**:构造函数是一种特殊的函数,用于创建对象实例。通过`new`关键字调用构造函数可以创建一个新的对象实例。 ```...

    javascript面向对象学习笔记

    总结一下,JavaScript面向对象编程主要包括类的表示(通过构造函数)、对象的创建(对象工厂、构造函数、原型模式)以及继承的实现(原型链)。理解这些概念对于深入学习JavaScript和开发复杂的JavaScript应用至关...

    JavaScript面向对象的编程

    在JavaScript中,面向对象主要依赖于以下几个关键概念: 1. **对象**:JavaScript的对象是由键值对组成的无序集合,这些键可以是字符串或符号,而值则可以是任意类型。对象是JavaScript的基础,它们可以通过字面量...

    Javascript 面向对象编程

    ### JavaScript面向对象编程详解 #### 一、JavaScript与面向对象编程 JavaScript虽然是一种基于对象的语言,但其设计并不像传统的面向对象编程语言那样拥有明确的类(class)概念。这使得在JavaScript中实现面向...

    JavaScript面向对象技术实现树形控件

    JavaScript面向对象技术在实现树形控件中扮演着至关重要的角色。树形控件是一种用于展示层次型数据的用户界面元素,它具有扩展和折叠功能,可以在有限的空间内清晰地展示大量的信息,使得数据间的层级关系一目了然。...

    JavaScript学习之二 — JavaScript创建对象的8种方式

    在JavaScript中,对象是数据和函数的集合,是实现面向对象编程的基础。本文将深入探讨JavaScript创建对象的8种常见方式,帮助你更好地理解和掌握这门动态类型的编程语言。 1. **字面量(Literal)方式** 这是最...

    JavaScript面向对象编程指南(第2版)

    1.本书是唯一一本介绍JavaScript面向对象编程的图书。, 2.本书作者是知名的Web开发人员和作者。受到国内众多前端开发人员,如淘宝UED团队的推崇和推荐。 Stoyan Stefanov:Facebook公司工程师、作家、演说家。他经常...

    JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式包括工厂方式、构造函数和原型方式,每种方法都有其特点和适用场景,接下来我们将详细探讨。 工厂方式是最早期的面向对象编程在JavaScript中的实践之一。使用工厂方式定义类,本质上就是...

    javascript面向对象之Javascript 继承

    上几节讲了 JavaScript 面向对象之命名空间 、 javascript 面向对象的JavaScript类 、 JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看。在JavaScript...

Global site tag (gtag.js) - Google Analytics