js 函数对象的继承 inherit 带 插件完整解析版[helpers.js]
前言:
本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。
本篇文章为您分析一下原生JS的对象继承方法
需求分析:
1. 普通用户功能
2. 会员用户功能
3. 会员用户需要拥有普通用户的所有功能,并且自身也要有自己的功能
JS行为:
/**
* 普通用户构造函数
* @param {*} firstName
* @param {*} lastName
* @param {*} age
*/
function User(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = this.firstName + " " + this.lastName;
}
// 普通用户构造函数的方法
User.prototype.sayHello = function () {
console.log(`大家好,我叫${this.fullName}, 加年${this.age}了`);
}
/**
* 会员用户构造函数
* @param {*} firstName
* @param {*} lastName
* @param {*} age
* @param {*} money
*/
function VIPUser(firstName, lastName, age, money) {
User.call(this, firstName, lastName, age);
this.money = money;
}
VIPUser.prototype.upgrade = function () {
console.log(`使用了${100}元软妹币升级了`);
this.money -= 100;
}
var vUser = new VIPUser("晓", "佰", 10, 100); // 调用构造函数
先来看看vUser的目前指向
代码虽少,理解不易
/**
* 对象的继承
* @param {Function} son 子类构造函数
* @param {Function} father 父类构造函数
*/
this.myPlugin.inherit = function (son,father) {
son.prototype = Object.create(father.prototype);
son.prototype.constructor = son;
son.prototype.uber = father.prototype;
}
这个函数一定要在最开始调用,因为他会改变他的原型
如果你在后面调用了,他肯定会覆盖了你原来的原型结构
son.prototype = Object.create(father.prototype);
Object.create是es5的方法
以前使用的是函数和创建一个新对象等方式
son.prototype = Object.create(father.prototype);
son.prototype.constructor = son;
!
我们在页面上打印vUser.__proto__.constructor看看效果
为了方便子类来获取父类的原型
我们在子类中添加一个属性来保留父类的原型
在页面上打印子类的父类看看
/**
* 雅虎公司的继承
* @param {Function} son 子类构造函数
* @param {Function} father 父类构造函数
*/
this.myPlugin.inherit = (function () {
var Temp = function () { };
return function (son, father) {
Temp.prototype = father.prototype;
son.prototype = new Temp();
son.prototype.constructor = son;
son.prototype.uber = father;
}
}());
结语
整完!!
js 函数对象的继承 inherit 带 插件完整解析版[helpers.js]的更多相关文章
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
- js 实现对象的混合与克隆效果,带完整版解析代码[helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 对象混合 ...
- 关于js函数对象的理解
js中函数和对象的关系: 什么是对象?根据W3C上面的解释JS中所有事物都是对象,对象是拥有属性和方法的数据,由此可以看出除了基 本值类型不是对象(number.string.Boolean.Unde ...
- 关于js的对象原型继承(一)
javascript中,对象的继承是通过原型去继承. 可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象.这个原型__proto__指向谁,这个对象就继承谁. ...
- 认识js函数对象(Function Object)
认识函数对象(Function Object) 可以用function关键字定义一个函数,对于每个函数可以为其指定一个函数名,通过函 数名来进行调用.这些都是代码给用户的印象,而在JavaScript ...
- js函数对象
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很 ...
- js 函数对象
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解: javaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的,通过函数对象的性质,可以很 ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 关于js的对象原型继承(二)
本章讨论使用new一个构造函数来创建一个对象. 前期知识点说明: 1.prototype是函数的一个属性,每个函数都有一个prototype属性.这个属性是一个指针,指向一个对象.它是显示修改对象的原 ...
随机推荐
- 1519: 【USACO】超级书架
1519: [USACO]超级书架 时间限制: 1 Sec 内存限制: 64 MB 提交: 1735 解决: 891 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 Farmer Jo ...
- Zookeeper是如何实现分布式锁的
[toc] Zookeeper是如何实现分布式锁的 标签 : Zookeeper 分布式 实现分布式锁要考虑的重要问题 1. 三个核心要素 加锁, 解锁, 锁超时 2. 三个问题 要保证原子性操作, ...
- 在markdown中怎么划线?-[markdown]
使用html标签:<hr/> 示例: 百灵鸟,飞过蓝天. <hr/> 我爱你,我亲爱的祖国. <hr/> 生为华夏傲骨,死是华夏精魂. 效果: 基本算法
仅供JavaScript刷题参考用. 二叉查找树和平衡二叉树 其它树:满二叉树.完全二叉树.完美二叉树.哈弗曼树.二叉查找树BST.平衡二叉树AVL 了解:红黑树,是一种特殊的二叉树.这种树可以进行高 ...
- 三通道低功耗ASK低频唤醒接收器PAN3501完全替代AS3933/GC3933
低频唤醒接收器PAN3501软硬件兼容AS3933/GC3933,且新增了寄存器功能,可直接替换,供应稳定,高性价比. 产品介绍: PAN3501是一款最多三个通道接收的低功耗ASK接收机,可用 ...
- 微信小程序--分享功能
微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...
- 微信小程序mpvue-动态改变navigationBarTitleText值
通过JS动态 改变navigationBarTitleText的值 能否通过JS动态改变navigationBarTitleText的值? 方法一:可以在onLoad方法中通过wx.setNaviga ...
- 微信号网页版api
Django Wechat Api djangowechatapi是基于wxpy和django制作的web应用 安装 使用pip pip install djangowechatapi 源码安装 gi ...
- sprigboot 异常 Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].Tomc...
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...
- Java学习成长第一集
由于最近所在项目组的项目临近结尾,所以有时间对自己近来的学习做个总结.不得不说,程序员不学习就退步这句话是真的很让人信服!自己入行将近一年的时间,所学的就是Java开发的专业,很羞愧的是现在的自己能力 ...