js怎样实现继承
js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.parent=Parent;
- this.parent(firstname);
- delete this.parent;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- var mychild=new Child("李");
- mychild.saySomeThing();
2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.call(child,child.getName());
- child.saySomeThing();
3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象
- function Parent(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- this.getName=function()
- {
- return firstname;
- }
- }
- var child=new Child("张");
- Parent.apply(child,[child.getName()]);
- child.saySomeThing();
4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- function Child(firstname)
- {
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
5.采用混合模式实现继承
- function Parent()
- {
- this.sayAge=function()
- {
- console.log(this.age);
- }
- }
- Parent.prototype.sayParent=function()
- {
- alert("this is parentmethod!!!");
- }
- function Child(firstname)
- {
- Parent.call(this);
- this.fname=firstname;
- this.age=40;
- this.saySomeThing=function()
- {
- console.log(this.fname);
- this.sayAge();
- }
- }
- Child.prototype=new Parent();
- var child=new Child("张");
- child.saySomeThing();
- child.sayParent();
js怎样实现继承的更多相关文章
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js模拟实现继承功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- js怎么实现继承?
3. js怎么实现继承? 1. 使用原型prototype 这个问题其实之前总结过了……但是面试时候有点忘……主要思想是记得的,但是不会写,还是基础太不牢靠,写的太少了.一开始因为不知道怎么能继承父类 ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
随机推荐
- P1330 封锁阳光大学(二分图染色)
题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...
- Poj 1061 青蛙的约会(扩展欧几里得解线性同余式)
一.Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要 ...
- 上传下载,使用,commons-fileupload,commons-io来加载上传下载
导入两个jarcommons-fileupload.jar,和commons-io.jar 在请求中创建核心类 // 1. 创建工厂对象 FileItemFactory factory = new D ...
- 低调的css3属性font-size-adjust
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果,可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1&l ...
- 【转】 Pro Android学习笔记(五二):ActionBar(5):list模式
可以在action bar中加入spinner的下来菜单,有关spinner,可以参考Pro Android学习笔记(二十):用户界面和控制(8):GridView和Spinner. list的样式和 ...
- modbus读输入状态与读线圈状态的区别?
01 读线圈状态 描述 读从机离散量输出口的 ON/OFF 状态,不支持广播.附录B列出由不同控制器型号支持最大的参数清单. 查询 查询信息规定了要读的起始线圈和线圈量,线圈的起始地址为零,1-16个 ...
- linux日常管理-curl工具
curl 在linux命令行中用于访问网站,下载东西, 可以用 curl www.qq.com 访问 出现很多源代码 ///////////////////////////////////////// ...
- shell入门-awk-2
awk的条件操作符 ///显示第一段有root的行 [root@wangshaojun ~]# awk -F ':' '$1=="root"' 1.txtroot:x:0:0:ro ...
- 六种获取配置properties文件的方法
总结一下六种获取配置properties文件的方法,代码如下: package com.xujingyang.test ; import java.io.BufferedInputStream ; i ...
- 用 R 画中国分省市地图
用 R 画中国分省市地图 (2010-11-18 16:25:34) 转载▼ 标签: 中国地图 营销 杂谈 分类: 数据分析 用R 也可以做出漂亮的依参数变化的中国地图. 主要参考(http://co ...