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各种复制代码收集
Sep 20 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
js 调整select 位置的函数
2008/02/21 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Node.js实现文件上传
2016/07/05 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Django框架封装外部函数示例
2019/05/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python实现画循环圆
2019/11/23 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python温度转换华氏温度实现代码
2020/12/06 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
上学迟到的检讨书
2014/01/11 职场文书
中学教师培训制度
2014/01/31 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
商业计划书格式、范文
2019/03/21 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python