共计 3307 个字符,预计需要花费 9 分钟才能阅读完成。
JavaScript 面向对象
面向对象的两大编程思维
面向过程
面向过程很好了解,就是剖析出解决问题所须要的步骤,而后用函数把这些步骤一步一步实现,应用的时候再一个一个的顺次调用就能够了
面向对象
上大学时老师教过咱们,万物皆对象。面向对象就是把事务合成成为一个个对象,而后由对象之间分工与单干。
举个例子
一个人盖个狗窝,间接弄泥,砖头,润饰一下就成了
然而盖高楼的话,须要打地基,须要运输资料,须要财务结算等,此时不须要等,各做各的,效率才高
面向对象三大个性
就拿拖拉机来说
封装性【曾经把耕地性能筹备好,负责开就行】
继承性【继承与拖拉机,会开拖拉机就会弄这个,继承自拖拉机】
多态性【能够拆卸不同的机械,除了耕地还能够拉货】
面向过程和面向对象的优缺点
面向过程
长处:性能比面向对象高,步骤练习严密
毛病:不好保护,不易屡次应用及扩大
面向对象
长处:易保护,可复用,可扩大,灵活性高
毛病性能没有面向过程高
ES6 中的类和对象
类 class
在 ES6 中新减少了类的概念,能够应用 class 关键字申明一个类,之后以这个类来实例化对象。【构造函数实例化对象】
类形象了对象的公共局部,它泛指某一大类(class)ES5:没有类,ES6:类
ES:ECMAscript
类是在 ES6 中新加进入的,学会区分类和对象的概念
类:泛指一类
对象:类中的具体的某个实例,【属性和办法的集合体】
类:形象
类模仿形象的,泛指的,对象是具体的
面向对象模仿事实世界,更贴近理论生存,生活照分为形象事物和具体事物
比方:手机【两层含意:具体某个手机,和抽象的概念手机】
抽取,把对象的属性和行为封装成一个类
对类进行实例化, 获取类的对象
例如:人有身高,体重等,然而具体的某个人也有这个属性 练习理解类和对象
一个对象能够继承多个类,而类就是一个泛指
对象:具体
对象:类中的具体的某个实例【属性和办法的集合体】
现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人能够是对象
在 JavaScript 中,对象是一组无序的相干属性和办法的汇合,所有的事物都是对象,例如字符串、数值、数组、函数等。
var n = 3;
var arr = [1,2,3];
function fn () {}
var str= 'abcd';
<img src='a.jpg'>
复制代码
对象是由属性和办法组成的
属性:对象有什么【拜访】【语法:对象. 属性】
办法:对象做什么【执行】【语法:对象. 办法()】
属性:事物的特色,在对象中用属性来示意(罕用名词)
办法:事物的行为,在对象中用办法来示意(罕用动词)
面向对象的思维特点
抽取(形象)对象共用的属性和办法组织 (封装) 成一个类(模板)
对类进行实例化, 获取类的对象
类外面的属性和办法,其实是把对象的公共属性和公共办法放到了一起
创立类
语法:class 类名 {属性和办法}【构造函数语法糖】
留神类名首字母大写
类要抽取公共属性办法,定义一个类
class Star {
};
var ldh = new Star();
复制代码
类就是构造函数的语法糖
constructor 构造函数
语法
class Star {constructor (uname,age) {
this.uname = uname;
this.age = age;
}
}
复制代码
属性:放到 constructor,构造函数外面
留神:类外面的办法不带 function,间接写既可
类外面要有属性办法,属性办法要是想放到类外面,咱们用 constructor 结构器
构造函数作用:接管参数,返回实例对象,new 的时候被动执行,次要放一些公共的属性
constructor() 办法是类的构造函数(默认办法),用于传递参数, 返回实例对象,通过 new 命令生成对象实例时,主动调用该办法。
留神:每个类外面肯定有构造函数,如果没有显示定义, 类外部会主动给咱们创立一个 constructor(),
留神:this 代表以后实力化对象,谁 new 就代表谁
类增加办法
语法:留神办法和办法之间不能加逗号
class Star {constructor () {}
sing () {}
tiao () {}
}
复制代码
class 类名 {constructor(){} 办法名(){}}
留神:类中定义属性,调用办法都得用 this
留神:办法之间不能加逗号分隔,同时办法不须要增加 function 关键字
总结:类有对象的公共属性和办法,用 class 创立,class 外面蕴含 constructor 和办法,咱们把公共属性放到 constructor 外面,把公共办法间接往后写既可,然而留神不要加逗号
类的继承
extends 关键字
语法:
class Father {}
class Son extends Father{}
复制代码
留神:是子类继承父类
super 关键字
咱们利用的过程中会遇到父类子类都有的属性,此时,没必要再写一次,能够间接调用父类的办法就能够了
super 关键字用于拜访和调用对象父类上的函数。能够调用父类的构造函数,也能够调用父类的一般函数
当子类没有 constructor 的时候能够随便用父类的,然而如果子类也含有的话,constructor 会返回实例,this 的指向不同,不能够再间接应用父类的货色
调用父类构造函数
class F {constructor(name, age){}}
class S extends F {constructor (name, age) {super(name,age);
}
}
复制代码
留神: 子类在构造函数中应用 super, 必须放到 this 后面(必须先调用父类的构造方法, 在应用子类构造方法
调用父类一般函数
class F {constructor(name, age) { }
say () {}
}
class S extends F {constructor (name, age) {super(name,age);
}
say () {super.say()
}
}
复制代码
留神:如果子类也有雷同的办法,优先指向子类,就近准则
总结:super 调用父类的属性和办法,那么查找属性和办法的准则就近准则
如果子类不写货色,那么间接继承父类就能够用
然而如果子类有本人的构造函数和父类同名的办法,此时不能够间接用父类的货色,须要用 super 调用父类的办法和构造函数
三个留神点
在 ES6 中类没有变量晋升,所以必须先定义类,能力通过类实例化对象.
类外面的共有属性和办法肯定要加 this 应用
类外面的 this 指向问题
constructor 外面的 this 指向实例对象, 办法外面的 this 指向这个办法的调用者
例子
class Button {constructor () {var btn = document.querySelector('input');
btn.onclick = this.cli;
}
cli () {console.log('点击了');
}
}
var anniu = new Button();
复制代码
类外面的 this 指向
构造函数的 this 指向实例对象
一般函数的 this 是调用者,谁调用 this 是谁
例子
<input type="button" value="点击">
var that;
class F {constructor (name, age) {
this.name = name;
this.age = age;
// console.log(this);
that = this;
this.btn = document.querySelector('input');
this.btn.onclick = this.cli;
}
cli () {console.log(this);
}
say () {console.log(this);
}
}
var obj = new F('张学友',22);
最初
如果你感觉此文对你有一丁点帮忙,点个赞。或者能够退出我的开发交换群:1025263163 互相学习,咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话,麻烦请给咱们的开源我的项目点点 star:http://github.crmeb.net/u/defu 不胜感激!
残缺源码下载地址:https://market.cloud.tencent….
PHP 学习手册:https://doc.crmeb.com
技术交换论坛:https://q.crmeb.com