
js基础复习8-call方法简单使用以及javascript继承
我们发现第一次单独调用fn()的时候,this打印出来的是global,因为我们在node环境下运行的,在浏览器端运行代码这里this就指向window
call方法后面还可以接收多个参数,看一个例子:
结果:
结果:
我们在浏览器里面打个断点看看:
看到没?这里的this指向Son
如果直接把子类Son的prototype指向父类Father的prototype, 那么确实子类可以拿到父类原型上的方法money:
但是此时子类的原型对象和父类的原型对象都指向了同一个内存地址,这样就会相互影响,子类如果想添加一个子类单独的方法,父类的实例对象也能拿到子类定义的这个方法,这显然不是我们想要的:
我们在上面代码中,使用Son.prototype = Father.prototype,那么接下来操作Son.prototype,就会影响到父类,比如我们在Son.prototype上面添加一个exam方法,然后看父类的原型对象Father.prototype:
这样的原理如下图:
这样就改回来了
发布日期:2021-05-07 01:06:34
浏览次数:8
分类:技术文章
本文共 1398 字,大约阅读时间需要 4 分钟。
首先回忆一下call方法的作用,它可以调用一个方法,并且第一个参数可以指定方法内部this的值:

第二次我们使用call方法调用fn的时候,由于我们在call方法的第一个参数那里传入了一个obj,所以fn()方法内部的this指向了这个obj,所以打印出来的this就是这个obj
我们看一下同样的代码在浏览器里是什么结果:



function fn(x, y) { console.log(this) console.log('x + y = ', x + y)}fn()var obj = { name: "Dean", gender: "male"}fn.call(obj, 10, 20)
call的简单用法先说到这里,现在我们谈谈javascript中的继承
ES6之前并没有提供extends继承,我们是通过
其中,构造函数用来继承父类的属性,原型对象用来继承父类的方法构造函数+原型对象
模拟实现继承,被称为组合继承
1.构造函数用来继承父类的属性:
子类Son想借用父类Father的属性,于是调用Father.call()
方法,传入this,这样就相当于Father执行的时候,内部的this指向了子类Son的实例对象son




我们还可以给子类单独设置属性:

2.原型对象用来继承父类的方法:
先看一个错误的做法:




显然我们不希望exam方法出现在Father的原型对象上
所以我们可以这样写:



我们把Son的prototype指向一个Father的实例对象,然后子类Son想要单独添加的方法就写在Son.prototype上,因为此时Son.prototype是Father的一个实例对象,修改它不会影响Father.prototype,并且Son的实例对象可以通过Son.prototype(此时是Father的一个实例对象)的__proto__属性访问到父类原型对象上的方法money
但是还有问题!!
我们来打印一下下面的数据


这里子类Son的prototype.constructor指向了Father,这明显是不对的,我们之前说过,如果利用对象的形式修改了原型对象,别忘了利用contructor属性指回原来的构造函数
所以我们还要加一步:

发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2025年03月23日 02时54分28秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
web前端面试一从输入url到看到页面发生了什么
2019-03-03
智慧水利的泵站自动化监控系统解决方案
2019-03-03
C getopt.h
2019-03-03
CentOS下Nvidia docker 2.0之安裝教程&踩坑實錄
2019-03-03
H5页面授权获取微信授权(openId,微信nickname等信息)
2019-03-03
SpringBoot的URL是如何拼接的
2019-03-03
2018年年终总结
2019-03-03
解决checkbox未选中不传递value的多种方法
2019-03-03
【pgsql-参数详解1】PostgreSQL默认参数值
2019-03-03
HTTP协议(1)_入门的一些教程和资源
2019-03-03
钉钉登录及常用的URL及IP
2019-03-03
CENTOS 删除nginx
2019-03-03
【redis键过期删除策略】很高兴再次认识你
2019-03-03
【工具篇】EasyExcel的应用
2019-03-03
SSM发送手机验证码——以网建SMS为例
2019-03-03
大范围卫星影像快速处理
2019-03-03
监控264后缀文件播放
2019-03-03