ES5和ES6的类，静态方法，继承实现代码

ES5 类和静态方法

function Person(info) {//构造函数里面的方法和属性this.name = 'fur'this.age = 1this.run = function() {console.log(`${this.name}---${this.age}`)console.log(`${info}`)}
}
//原型链上面的属性和方法可以被多个实例共享
Person.prototype.sex= '女'
Person.prototype.work = function(){console.log(`${this.name}---${this.sex}`)
}Person.staticMethods = function (){console.log('静态')
}/*实例方法是通过实例化来调用的，静态是通过类名直接调用*/
var p = new Person('furfur-jiang')
Person.staticMethods()
//静态console.log(p.name)
//furp.run()
//fur---1
// furfur-jiangp.work()
//fur---女

ES5 继承

原型链继承和对象冒充继承结合的组合继承模式

对象冒充继承：没法继承原型链上面的属性和方法

原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，实例化子类的时候没法给父类传参

function Son (info){Person.call(this,info)/*对象冒充实现继承*/
}
Son.prototype = new Person()
let s = new Son('son')
s.run()
// fur---1
// son
s.work()
// fur---女

ES6实现类

class Father {constructor(name, age) {/*类的构造函数，实例化的时候执行，new的时候执行*/this.name = namethis.age = age}getName() {console.log(this.name)}setName(val) {this.name = valconsole.log(this.name)}
}
var f = new Father('aaa',20)
f.getName()//aaa
f.setName('bbb')//bbb

ES6实现继承

class Son extends Father{constructor(name,age,sex){super(name,age)/*实例化子类时把子类的数据传给父类*/this.sex = sex}getSex(){return this.sex}
}
let s = new Son('fur',1,'女')
s.getName()//fur
console.log(s.getSex())//女

ES6实现静态方法

class Father {constructor(name,age) {/*类的构造函数，实例化的时候执行，new的时候执行*/this.name = namethis.age = age}static work(){//静态方法console.log('静态')}
}
Father.instance='这是一个静态方法的属性';
//静态方法无需实例化
Father.work()//静态
console.log(Father.instance);//这是一个静态方法的属性

ES5和ES6的类，静态方法，继承实现代码相关推荐

详解JavaScript中ES5和ES6的类、继承之间区别和联系
导读: 很多JavaScript的初学者(比如说我)在刚开始学习这门语言的时候,往往会对函数.对象.类.继承这些概念感到迷茫和疑惑,感觉他们彼此之间长得十分相似,这就导致很难分清他们什么时候该怎么用. ...
typescript学习之路(四) —— ts类的继承（包含es5以及es6的类继承）
上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承原型 ...
es5和es6声明类的区别/es5和es6继承的区别
// es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...
ES6——class类的继承与静态方法
类的继承通过关键字:super 代码示例: {//父类class Father{constructor(name){this.name = name;this.hobby = "抽烟,喝酒 ...
ES5与ES6中如何实现继承
ES5中实现继承 // 使用类或不使用类继承 // 继承 (2个类连起来) function Animal (lengthNumber) {this.lengthNumber = legsNumber ...
ES5和ES6的类的区别
目录一.写法上面的区别二.二者的其他区别 1.class 不能提升 2.class只能通过new 实例 3.class的原型上属性不能遍历 4.实现继承的方法不同一.写法上面的区别我们用ES5 ...
React 项目 -ES6 语法类的继承（10）
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
前端开发，必知ES5、ES6的7种继承
众所周知,在ES6之前,前端是不存在类的语法糖,所以不能像其他语言一样用extends关键字就搞定继承关系,需要一些额外的方法来实现继承.下面就介绍一些常用的方法,红宝书已经概括的十分全面了,所以本文 ...
实现es5和es6的类
类的由来 JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大.所以,ES6引入了Class这个概念作为对象的模板. class可以看作只是一个语法糖 ...

ES5和ES6的类，静态方法，继承实现代码

ES5 类和静态方法

ES5 继承

ES6实现类

ES6实现继承

ES6实现静态方法

ES5和ES6的类，静态方法，继承实现代码相关推荐

最新文章

热门文章