初探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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
基于openlayers实现角度测量功能
Sep 28 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python数据封装json格式数据
2018/03/04 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
关于期中考试的反思
2014/02/02 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
付款委托书范本
2014/10/05 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Java spring单点登录系统
2021/09/04 Java/Android