`
ylz4647
  • 浏览: 49931 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Javascript---类的继承

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

Java代码 复制代码
  1.   
  2. //第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象)   
  3. function Parent(username){   
  4.     this.username = username;   
  5.     this.say = function(){   
  6.         alert(this.username);   
  7.     }   
  8. }   
  9.   
  10. function Child(username,password){   
  11.        
  12.     this.temp = Parent;//temp指向Parent所指向的地方 。 利用js里的每一个方法名都是一个Function对象,指向一个方法。   
  13.     this.temp(username);//初始化方法里的内容   
  14.     delete this.temp;//temp没有用了。可以直接删除掉.this不可以丢了   
  15.        
  16.        
  17.     //Parent(username);//这样写表面看起来是正确的,其实是错误的。因为只有new出来的对象才有this,所以调用Parent里的this就没有值了   
  18.        
  19.        
  20.     this.password = password;   
  21.     this.hello = function(){   
  22.         alert(this.password);   
  23.     }   
  24. }   
  25.   
  26. var parent = new Parent("zhangsan");   
  27. parent.say();//zhangsan   
  28.   
  29. var child = new Child("lisi","123456");   
  30. child.say();//lisi   
  31. child.hello();//123456  
//第一种方式,冒充对象的方式.(利用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对象的一个函数,具体用法如下
Java代码 复制代码
  1. //call()函数是Function对象的一个函数   
  2. //具体用法如    
  3. function test(str){   
  4.     alert(this.username + ","  + str);   
  5. }   
  6.   
  7. var o = new Object();   
  8. o.username = "zhangsan";   
  9. test.call(o,"123456");//zhangsan,123456 .因为每个Function 对象都有一个call()方法,而函数名就是一个Function对象.call()函数的第一个参数是test函数里的this.  
//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.


所以继承可以这样实现:
Java代码 复制代码
  1. function Parent(username){   
  2.     this.username = username;   
  3.     this.say = function(){   
  4.         alert(this.username);   
  5.     }   
  6. }   
  7. function Child(username,password){   
  8.     Parent.call(this,username);   
  9.     this.password = password;   
  10.     this.hello = function(){   
  11.         alert(this.password);   
  12.     }   
  13. }   
  14. var parent = new Parent("zhangsan");   
  15. parent.say();//zhangsan   
  16.   
  17. var child = new Child("lisi","123456");   
  18. child.say();//lisi   
  19. child.hello();//123456  
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的参数为数组

Java代码 复制代码
  1. //第三种实现方式:apply()函数方式,apply()和call()是一样的,只不过参数传递不同而已,apply的参数为数组   
  2. //所以继承可以这样实现   
  3.   
  4. function Parent(username){   
  5.     this.username = username;   
  6.     this.say = function(){   
  7.         alert(this.username);   
  8.     }   
  9. }   
  10. function Child(username,password){   
  11.     Parent.apply(this,new Array(username));   
  12.     this.password = password;   
  13.     this.hello = function(){   
  14.         alert(this.password);   
  15.     }   
  16. }   
  17. var parent = new Parent("zhangsan");   
  18. parent.say();//zhangsan   
  19.   
  20. var child = new Child("lisi","123456");   
  21. child.say();//lisi   
  22. child.hello();//123456  
//第三种实现方式: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种方式:原型链实现继承

Java代码 复制代码
  1. //原型链实现继承   
  2. function Parent(){   
  3. }   
  4. Parent.prototype.hello = "hello";   
  5. Parent.prototype.sayHello = function(){   
  6.     alert(this.hello);   
  7. }   
  8.   
  9. function Child (){   
  10. }   
  11. Child.prototype = new Parent();//关键   
  12.   
  13. Child.prototype.world = "world";   
  14. Child.prototype.sayWorld = function(){   
  15.     alert(this.world);   
  16. }   
  17.   
  18. var child = new Child();   
  19. child.sayHello();   
  20. child.sayWorld();  
//原型链实现继承
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.第五种方式:混合模式实现继承
Java代码 复制代码
  1. //混合模式实现继承   
  2. function Parent(hello){   
  3.     this.hello = hello;   
  4. }   
  5. Parent.prototype.sayHello = function(){   
  6.     alert(this.hello);   
  7. }   
  8.   
  9. function Child(hello,world){   
  10.     this.world = world;   
  11.     Parent.call(this,hello);//关键   
  12.   
  13. }   
  14. Child.prototype = new Parent(); //关键   
  15. Child.prototype.sayWorld = function(){   
  16.     alert(this.world);   
  17. }   
  18.   
  19. var child = new Child("hello","world");   
  20. child.sayHello();   
  21. child.sayWorld();  
//混合模式实现继承
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中的精髓,也是面试...

    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-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、...

    Javascript编程 类的继承及封装:Class

    文档全部内容如下: Javascript编程 类的封装 2018年3月  javascript编程是在网络开发中不可或缺的一项技术。...通过以上的介绍,也许读者您也可以尝试制作一个自己易用的类继承-封装机制了。  寻找有缘!

    Object-Oriented JavaScript

    - **继承与多态**:利用原型链或ES6类特性实现继承,子类可以重写父类的方法来实现多态性。 #### 知识点五:高级面向对象技术 - **装饰器**:一种特殊类型的声明,可以被附加到类声明、方法、访问器、属性或参数上...

Global site tag (gtag.js) - Google Analytics