js实现继承
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对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
- js实现继承的5种方式 (笔记)
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- js实现继承的方式总结
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- 浅谈JS的继承
JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...
- JS类继承常用方式发展史
JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...
- js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- JS原型继承与类的继承
我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
- mysql的一些基本操作语句
-- 创建一个php2016的数据库create database php2016;-- 查看数据库的创建创建语句show create database php2016;-- 指定默认的操作数据库u ...
- ZOJ 1015 Fishing Net(弦图判定)
In a highly modernized fishing village, inhabitants there make a living on fishery. Their major tool ...
- 迭代器和for-of
在ES5及之前的JS标准中,我们习惯了用for(var i = 0; i < Array.length;i++){//TODO}或者是for(var index in Array){consol ...
- oracle 面试题
1.对数据库SQL2005.ORACLE熟悉吗? SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台. ORACLE是ORACLE公司的数 ...
- An internal error occurred during: "Building workspace".
当在eclipse中的web工程中增加了extjs4,出现An internal error occurred during: "Building workspace". Java ...
- JavaWeb应用开发架构浅谈
本文就我所经历和使用过的技术和框架, 讨论 Java / Javascript 技术组合构成的Web 应用架构. 一. 概述 Web 应用架构可以划分为两大子系统:前端子系统和后台子系统. 前端子系统 ...
- Git错误non-fast-forward后的冲突解决
Git错误non-fast-forward后的冲突解决当要push代码到git时,出现提示: error:failed to push some refs to ... Dealing with “n ...
- linux 互信不生效
版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 操作系统版本 1)操作系统 cat /etc/issue cat /etc/issue CentOS release 6.6 (Final ...
- php strrpos()与strripos()函数不同之处在哪里呢
strripos() 函数 定义和用法strripos() 函数查找字符串在另一个字符串中最后一次出现的位置.如果成功,则返回位置,否则返回 false.语法strrpos(string,find,s ...
- [问题2014S09] 解答
[问题2014S09] 解答 充分性: 先证明对 Jordan 块 \(J_r(1)\) 以及任意的正整数 \(m\), 均有 \(J_r(1)^m\) 相似于 \(J_r(1)\). 设 \(N ...