es6中Class类和继承-示例
Posted JackieDYH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了es6中Class类和继承-示例相关的知识，希望对你有一定的参考价值。
面向对象拥有属性和方法，构造函数在es5及之前的写法如下：
function Per(name,age){
this.name=name;
this.age=age;
this.showName=function(){
return `名字为${this.name}`;
}
}
Per.prototype.showAge=function () {
return `年龄为${this.age}`;
}
//给对象添加方法等同于以上
Object.assign(Per.prototype,{
showName1(){
return `名字为${this.name}`;
},
showAge1(){
return `年龄为${this.age}`;
}
});
var p1=new Per('好好',3);
console.log(p1.showName(),p1.showName1());//结果均为名字为好好
console.log(p1.showAge(),p1.showAge1());//结果均为年龄为3
es6中变形：
const Person=class{
constructor(name,age){
//
}
showName(){
//
}
}
//上述是表达式，不推荐
let aaa='myFun';
let bbb='Hey';
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
return `名字为${this.name}`;
}
showAge(){
return `年龄为${this.age}`;
}
[aaa](){//方法名为变量
return `变量名为${aaa}`
}
[aaa+bbb](){
return `变量名为${aaa}+${bbb}`
}
}
let p2 =new Person('vivi',18);
console.log(p2[aaa]());//变量名为myFun
console.log(p2[aaa+bbb]());//变量名为myFun+Hey
//题外话
let json={
[aaa+bbb]:'json也可以变量拼接'
}
p2.ddd="lala";
注意点：1.**class没有提升（预解析），而调用函数都是一般都是在任何地方都可以。除了将函数保存为表达式。var fn=function(){}
let p1=new Person();
class Person{
constructor(){
this.name="bobo";
}
}
console.log(p1);Person is not defined
2.this，用class不必担心this指向混乱，永远指向class所在的对象。
矫正this
(1)fn.call(this指向谁,args1,args2…)
(2)fn.apply(this指向谁,[args1,args2…])
(3)fn.bind()//不管回调的事情，只矫正指向
class Person3{
constructor(){
this.name='vivi';
this.showName=this.showName.bind(this);//矫正this
}
showName(){
return `名字为:${this.name}`;
}
}
let p4=new Person3();
let {showName}=p4;//硬用解构
console.log(showName());//名字为:vivi
取值函数getter，存值函数setter。除了封装底层框架之外，很少用到。了解即可
class Person{
constructor(name,age){
}
get aaa(){
return `获取aaa的属性`
}
set aaa(val){
console.log(`设置aaa的属性，值为${val}`);//设置aaa的属性，值为123
}
}
let p1 =new Person();
p1.aaa="123";
console.log(p1.aaa);//获取aaa的属性
静态方法：类自身的方法，类可以自调用。
class Person {
showName() {
return `这是showName方法`
}
static showNew() {
return `这是静态方法`
}
}
var p1=new Person;
console.log(p1.showName());//这是showName方法
console.log(Person.showNew());//这是静态方法
类的继承：子继承父的属性和方法，es5传统模式如下：
function Person2(name) {
this.name=name;
this.showName=function () {
return `名字是${this.name}`;
}
}
function Student(name,skill) {
Person2.call(this,name);//继承属性
this.skill=skill;
}
Student.prototype=new Person2();//继承方法
//调用
let stu1= new Student('vivi','吃饭');
console.log(stu1.name);//vivi
console.log(stu1.showName());//名字是vivi
es6则方便得多：
class Person3{
constructor(name){
this.name=name;
}
showName() {
return `名字是${this.name}`;
}
}
class Student2 extends Person3{
constructor(name,skill){
super(name);//继承属性
this.skill=skill;
}
showName() {
super.showName();//父类的方法执行
//TODO做子级的事情
}
showSkill(){
return `哥们的技能为${this.skill}`
}
}//es6一句代码轻松搞定继承
let stu2= new Student('bro','跳舞');
let stu3=new Student2('bro','跳舞');
console.log(stu2.name);//bro
console.log(stu2.showName());//名字是bro
console.log(stu3.name);//bro
console.log(stu3.showSkill());//哥们的技能为跳舞
拖曳方法继承实例
<style>
.box{
width: 100px;
height: 100px;
background: rebeccapurple;
position: absolute;
top: 0;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
</head>
<body>
<div id="div1" class="box left">Div1</div>
<div id="div2" class="box right">Div2</div>
<script>
//普通拖曳，父类
class Drag{
constructor(id) {
this.oDiv=document.querySelector(id);
this.disX=0;
this.disY=0;
this.init();
}
init(){
this.oDiv.onmousedown = function (ev) {
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
}.bind(this);
}
fnMove(ev){
this.oDiv.style.left=ev.clientX - this.disX+'px';
this.oDiv.style.top=ev.clientY - this.disY+'px';
}
fnUp(){
document.onmousemove=null;
document.onmouseup=null;
}
}
//子类-限制范围，演示继承
class LimitDrag extends Drag{
fnMove(ev){
super.fnMove(ev);
//限制范围
if(this.oDiv.offsetLeft<=0){
this.oDiv.style.left=0;
}
if(this.oDiv.offsetTop<=0){
this.oDiv.style.top=0;
}
}
}
//调用
new Drag("#div1");
new LimitDrag("#div2");以上是关于es6中Class类和继承-示例的主要内容，如果未能解决你的问题，请参考以下文章