浅析2种JavaScript继承方式


Posted in Javascript onDecember 04, 2015

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。
1.原型(prototype):

function Body(name,age){// 创建一个Body类
  this.name = name;// 赋予基础属性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象

function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数(call&apply),也可以理解为组合式继承
call:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22

apply:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222

 js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。

以上就是关于JavaScript继承方式的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python循环语句之break与continue的用法
2015/10/14 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python3.7.0的安装步骤
2018/08/27 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
汽车专业求职信
2014/06/05 职场文书
营销计划书
2015/01/17 职场文书
人与自然的观后感
2015/06/18 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers
python多次执行绘制条形图
2022/04/20 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript