`
ttitfly
  • 浏览: 622115 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript---类的继承

阅读更多
1.第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象)


//第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象)
function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}

function Child(username,password){
	
	this.temp = Parent;//temp指向Parent所指向的地方 。 利用js里的每一个方法名都是一个Function对象,指向一个方法。
	this.temp(username);//初始化方法里的内容
	delete this.temp;//temp没有用了。可以直接删除掉.this不可以丢了
	
	
	//Parent(username);//这样写表面看起来是正确的,其实是错误的。因为只有new出来的对象才有this,所以调用Parent里的this就没有值了
	
	
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}

var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456


2.第二种方式:call()函数方式

call()函数是Function对象的一个函数,具体用法如下
//call()函数是Function对象的一个函数
//具体用法如 
function test(str){
	alert(this.username + ","  + str);
}

var o = new Object();
o.username = "zhangsan";
test.call(o,"123456");//zhangsan,123456 .因为每个Function 对象都有一个call()方法,而函数名就是一个Function对象.call()函数的第一个参数是test函数里的this.


所以继承可以这样实现:
function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}
function Child(username,password){
	Parent.call(this,username);
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}
var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456



3.第三种实现方式:apply()函数方式,apply()和call()是一样的,只不过参数传递不同而已,apply的参数为数组

//第三种实现方式:apply()函数方式,apply()和call()是一样的,只不过参数传递不同而已,apply的参数为数组
//所以继承可以这样实现

function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}
function Child(username,password){
	Parent.apply(this,new Array(username));
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}
var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456



4. 第4种方式:原型链实现继承

//原型链实现继承
function Parent(){
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

function Child (){
}
Child.prototype = new Parent();//关键

Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
	alert(this.world);
}

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


5.第五种方式:混合模式实现继承
//混合模式实现继承
function Parent(hello){
	this.hello = hello;
}
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

function Child(hello,world){
	this.world = world;
	Parent.call(this,hello);//关键

}
Child.prototype = new Parent(); //关键
Child.prototype.sayWorld = function(){
	alert(this.world);
}

var child = new Child("hello","world");
child.sayHello();
child.sayWorld();
分享到:
评论

相关推荐

    JavaScript面向对象编程--继承.mht

    JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht

    javascript-in-one-pic

    在高级特性方面,可能会介绍ES6及以后的新特性,如模板字符串、解构赋值、默认参数、剩余参数、类与继承、模块导入导出(import/export)、Promise对象用于异步处理、async/await语法糖等。 此外,JavaScript的事件...

    javascript-review-源码.rar

    - 类与继承:`class`语法糖,`extends`实现继承 - 解构赋值:方便地从数组或对象中提取值 - 声明提升:`let`和`const`防止变量污染全局 - 默认参数、剩余参数、模板字符串、箭头函数等更多特性 通过分析...

    complete-javascript-course-master.zip

    随着课程的深入,将涉及面向对象编程(OOP)的概念,如类、构造函数、继承和封装,这将帮助学员编写更加模块化和可维护的代码。此外,还将涵盖闭包、作用域、原型链等高级特性,这些是JavaScript中的精髓,也是面试...

    angluo-javascript-341240.zip

    JavaScript中的对象、类和原型链,以及构造函数、继承、封装等概念,这些都是理解和实现JavaScript高级特性的关键。此外,JavaScript还有独特的异步处理机制,如回调函数、Promise和async/await,这些都是现代Web...

    how-javascript-works.zip

    这意味着对象可以直接从其他对象继承属性和方法。 4. **事件驱动**:JavaScript常用于处理用户的交互事件,如点击按钮、滚动页面等,通过监听和响应这些事件来触发相应的函数。 5. **函数式编程**:JavaScript支持...

    Javascript - The Web Warrior Series 6th Edition

    - JavaScript支持原型继承和类继承两种方式实现OOP。 - 类(class)是ES6中引入的新特性,简化了面向对象编程的过程。 4. **实战篇**: - 本书提供了多个实际项目案例,如构建一个简单的网页游戏、实现一个动态网站...

    javascript 原生态js类继承实现的方式

    我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    js-高性能JavaScript-JavaScript语言精粹修订版

    - 了解JavaScript的原型链继承机制。 - 学习类的概念和使用ES6类语法进行面向对象编程。 3. **闭包与作用域:** - 深入理解闭包的概念及其应用场景。 - 掌握变量的作用域链以及词法作用域的特点。 4. **错误...

    Nicholas_C_Zakas-The_Principles_of_JavaScript-EN.pdf

    理解原型的工作原理以及原型链是理解JavaScript继承的关键。 6. 类型和对象的继承模式:尽管JavaScript不支持传统的类继承,但可以通过原型链和ES6引入的类语法来实现继承。本书将详细介绍这些继承模式以及它们的...

    Pro JavaScript-Tech中文版

    3. **类的继承**:尽管JavaScript没有传统的类继承机制,但它通过原型链实现了类似的功能。例如,`Schedule` 类可以通过引用 `Lecture` 对象来访问其方法和属性。 #### 三、面向对象编程实例 为了更好地理解面向...

    build-a-javascript-framework.pdf

    在"Introduction"中,作者对比了传统的类式继承与JavaScript的原型链机制。JavaScript中的"Objects and Classes vs. Prototype Classes"揭示了其独特的继承方式,原型类允许我们通过对象实例化其他对象,实现代码...

    javascript - ajax ppt

    4. **原型继承**:JavaScript使用原型链实现继承,对象可以继承其他对象的属性和方法。 5. **Lambda(匿名函数)**:函数可以作为值传递,使得函数式编程成为可能。 6. **全局变量链接**:虽然方便,但全局变量可能...

    JavaScript-关于JavaScript的学习了解

    4. **原型继承**:对象可以直接继承另一个对象的属性和方法,这种机制比传统的类继承更加灵活。 5. **闭包**:允许函数访问其外部作用域中的变量,即使在外部作用域已经关闭的情况下也是如此。 6. **异步编程**:...

    Javascript-从入门到精通2.txt

    新的 ECMAScript 版本持续引入新特性,如异步函数、类等,使得 JavaScript 更加强大和易用。此外,前端框架和库(如 React、Vue 和 Angular)的出现,也极大地提高了 Web 开发的效率。 总之,JavaScript 已经成为 ...

    Javascript-the-Good-Parts-notes, 关于seminal的优秀部分,注释.zip

    - JavaScript有两类数据类型:原始类型(Primitives)和引用类型(Objects)。原始类型包括:Undefined、Null、Boolean、Number、BigInt、String和Symbol。 - JavaScript是动态类型语言,变量可以随时更改其数据...

    JavaScript中的类继承

    JavaScript中的类继承 JavaScript中的类继承

    JavaScript-学习笔记.docx

    - JavaScript的继承主要通过原型链实现,也可以通过`Object.create()`或ES6的类和`extends`关键字来实现。 9. **对象克隆**: - 复制一个对象的所有属性,创建一个新的独立对象,可以使用浅复制(仅复制第一层...

    javascript实例应用---综合类.rar

    原型链是JavaScript继承的基础,通过__proto__属性或Object.getPrototypeOf方法可以访问对象的原型。 5. **数组与操作**:JavaScript的Array对象提供了丰富的数组操作方法,如push、pop、shift、unshift、slice、...

Global site tag (gtag.js) - Google Analytics