js的继承方法小结(prototype、call、apply)(推荐)


Posted in Javascript onApril 17, 2019

js的原型继承 --  prototype

先说下什么是prorotype?

  1. js中,俗话说“一切皆对象”。用new 出来的都是函数对象;否则就是普通对象
  2. 函数对象都有prototype(原型对象);而普通对象则只有__proto__(原型指针)
  3. 函数对象的一个特点:可以实现不同类之间的方法继承
  4. 函数的子类可以共享父类的方法,而父类不能想用子类的方法
eg: (prototype的继承)
 
 //创建父类函数对象  
 function Personal(name, age) {
  this.name = name;   //父类的私有属性
  this.age = age;
  this.house = ['北京', '上海']
 }
 Personal.prototype.run = function() {  //给父类原型动态添加方法
  alert('原型方法:' + this.name + ' is running!');
 }
 var per = new Personal('小白', 24)
 per.run() //打印 --> 原型方法:小白 is running!
 
 //创建子类函数对象
 function Boy() {}
 Boy.prototype = new Personal('小黑', 19) //子类继承父类的所有属性和方法
 Boy.prototype.source = 100      //给子类添加原型属性
 Boy.prototype.printSource = function() { //给子类添加方法
  alert(this.name + '的原型方法printSouce打印成绩为:' + this.source) //小黑的原型方法printSouce打印成绩为:100
 }
 Boy.prototype.run()  //打印 --> 原型方法:小黑 is running!
 var boys = new Boy()
 boys.printSource()
 console.log(boys, '--boys---') //打印 -->19, 小黑, 100 (这里会沿着prototype向上查找到Personal的属性)

以下是关于prototype继承需要注意的点:

1.如果父类中有引用类型的属性:Array,Object等。子类继承了这些属性,并尝试改变的话,会影响到父类的属性。

//创建另外一个实例1:
   var boys1 = new Boy()
   boys1.house.push('深圳')
//打印这两个实例:
   console.log(boys, boys1)

js的继承方法小结(prototype、call、apply)(推荐)

可以看出来,当属性为引用类型时,只要有一个实例的属性做了操作,所有的实例都会受到影响。

2.该方式导致 Boy.prototype.constructor 被重写,它指向的是 Personal 而非 Boy。因此你需要手动将 Boy.prototype.constructor 指回 Boy。

Boy.prototype = new Personal();
Boy.prototype.constructor === Personal; // true

// 重写 Boy.prototype 中的 constructor 属性,指向自己的构造函数 Boy
Boy.prototype.constructor = Boy;

3.因为 Boy.prototype = new Personal(); 重写了 Boy 的原型对象,所以 printSource 放在重写原型对象之前会被覆盖掉,因此给子类添加原型方法必须在替换原型之后(eg是没有被覆盖的)。

function Boy() {}
Boy.prototype = new Personal();

// 给子类添加原型方法必须在替换原型之后
Boy.prototype.printSource = function() {
 console.log('printSource~');
};

4.创建 boys 实例时无法向父类的构造函数传参,也就是无法初始化 source属性。因此:只能创建实例之后再修改父类的属性。

const boys = new Boy();

// 只能创建实例之后再修改父类的属性
boys.source = 100;

apply()、call()方法的继承

了解下apply()、call()方法

1.apply()、call()的用法:

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

obj是父级,thisObj是子级;第二个参数apply可以接收一个数组,而call只能是每项逐个接收。

2.apply和call 本来就是为了扩展函数的作用域而生的,换句话说就是为了改变this的指向存在的。

3.当一个object没有某种方法,但是其他的有,我们可以借助call和apply来用其他对象的方法来做操作,也可以传参数。

//eg:
function Personal(name, sex) {
   this.name = name;
   this.sex = sex;
   this.say = function (){
    alert('姓名:' + this.name + ';性别:' + this.sex)
   }
  }
  const per = new Personal('Allan', '男')
  per.say();
  
//apply()方法实现:
  function Girls(name, sex) {
   Personal.apply(this, [name, sex]);
   //Person.apply(this,arguments); //跟上句一样的效果,arguments 
   //Print.apply(this,arguments); //还可以实现继承多个父类,但是原型 prototype只能继承一个父类!!!切记
  }
  const girls1 = new Girls('Lucy', '女')
  girls1.say();
  
//call()实现:
  function Boy(name, sex) {
   Personal.call(this, name, sex);
  }
  const boys = new Boy('Barry', '男');
  boys.say() //

总结:

  1. prototype可以动态的给对象增加属性和方法。
  2. 可以实现子类继承父类,拥有父类的属性和方法。
  3. call和apply的区别,在于参数的不同。
  4. call和apply,理解为在子类的运行环境中执行父类的方法和属性。
  5. call和apply可以实现一个子类继承多个父类,但是prototype只能有一个父类。

 以上所述是小编给大家介绍的js的继承方法小结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
实现无刷新联动例子汇总
May 20 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 #Javascript
Vue源码探究之虚拟节点的实现
Apr 17 #Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 #Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 #Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 #Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 #Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
浅谈django orm 优化
2018/08/18 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
几个常见的消息中间件(MOM)
2014/01/08 面试题
拔河比赛口号
2014/06/10 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
罚站检讨书
2015/01/29 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技