初探JavaScript 面向对象(推荐)


Posted in Javascript onSeptember 03, 2017

类的声明

1. 构造函数

function Animal() {
 this.name = 'name'
}
// 实例化
new Animal()

2. ES6 class

class Animal {
 constructor() {
  this.name = 'name'
 }
}
// 实例化
new Animal()

类的继承

1. 借助构造函数实现继承

原理:改变子类运行时的 this 指向,但是父类原型链上的属性并没有被继承,是不完全的继承

function Parent() {
 this.name = 'Parent'
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
console.log(new Parent())
console.log(new Child())

2. 借助原型链实现继承

原理:原型链,但是在一个子类实例中改变了父类中的属性,其他实例中的该属性也会改变子,也是不完全的继承

function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 this.type = 'Child'
}
Child.prototype = new Parent()
let s1 = new Child()
let s2 = new Child()
s1.arr.push(4)
console.log(s1.arr, s2.arr)
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

3. 构造函数 + 原型链

最佳实践

// 父类
function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
// 子类
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
// 避免父级的构造函数执行两次,共用一个 constructor
// 但是无法区分实例属于哪个构造函数
// Child.prototype = Parent.prototype
// 改进:创建一个中间对象,再修改子类的 constructor
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
// 实例化
let s1 = new Child()
let s2 = new Child()
let s3 = new Parent()
s1.arr.push(4)
console.log(s1.arr, s2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(s2.constructor) // Child
console.log(s3.constructor) // Parent
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

总结

以上所述是小编给大家介绍的JavaScript 面向对象(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Array对象方法参考
Oct 03 Javascript
Date对象格式化函数代码
Jul 17 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
Angular4表单验证代码详解
Sep 03 #Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 #Javascript
javascript帧动画(实例讲解)
Sep 02 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
基于JQuery实现的Select级联
2014/01/27 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
大学生党课思想汇报
2013/12/29 职场文书
函授自我鉴定范文
2014/02/06 职场文书
秸秆管理实施方案
2014/03/15 职场文书
公休请假条
2014/04/11 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
劳资协议书范本
2014/04/23 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
优秀护士事迹材料
2014/12/25 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
电工实训心得体会
2016/01/14 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏