es5、es6、typescript中的类和对象
一.es5
//1.把属性和方法都放在构造函数中（不建议使用，每次创建实例都会创建公共的方法）
function Person(name){
this.name = name;
this.getName = function(){
return this.name;
}
this.setName = function(name){
this.name = name;
}
this.action = function(){
console.log('我是'+this.name)
}
}
Person.info = function(){
//静态方法，实例化对象不能调用，只能通过 Person.info()来调用
console.log('info')
}
Person.age = '20';
//静态属性
let teacher = new Person('张三');
console.log(teacher)
console.log(teacher.getName())//张三
teacher.action()//我是张三
teacher.setName('李四');
console.log(teacher)//2.公共的属性和方法放在原型上
function Person(name) {
this.name = name;
}
Person.prototype.getName = function (name) {
return this.name;
}
Person.prototype.setName = function (name) {
this.name = name;
}
Person.prototype.action = function (name) {
console.log('我是' + this.name)
}
Person.info = function(){
//静态方法，实例化对象不能调用，只能通过 Person.info()来调用
console.log('info')
}
Person.age = '20';
//静态属性
let teacher = new Person('张三');
console.log(teacher)
console.log(teacher.getName())//张三
teacher.action()//我是张三
teacher.setName('李四');
console.log(teacher)
//3.继承
//3.1 对象冒充继承，只能继承构造函数中的属性和方法,不能继承原型链上的属性和方法
function Person(name) {
this.name = name;
}
Person.prototype.getName = function (name) {
return this.name;
}
Person.prototype.setName = function (name) {
this.name = name;
}
Person.prototype.action = function (name) {
console.log('我是' + this.name)
}
Person.info = function(){
//静态方法，实例化对象不能调用，只能通过 Person.info()来调用
console.log('info')
}
Person.age = '20';
//静态属性function Teacher(name){
Person.call(this,name)
}
let teacher = new Teacher('王五');
console.log(teacher)
console.log(teacher.getName())// Uncaught TypeError: teacher.getName is not a function
//3.2原型链继承，能继承父类原型链的属性和方法，不能给父类的构造函数传参
function Person() {
this.name = '王五';
}
Person.prototype.getName = function (name) {
return this.name;
}
Person.prototype.setName = function (name) {
this.name = name;
}
Person.prototype.action = function (name) {
console.log('我是' + this.name)
}
Person.info = function(){
//静态方法，实例化对象不能调用，只能通过 Person.info()来调用
console.log('info')
}
Person.age = '20';
//静态属性，只能通过 Person.age来使用function Teacher(){
}
Teacher.prototype = new Person();
let teacher = new Teacher();
console.log(teacher)
console.log(teacher.getName())
//3.3 组合继承：原型链继承+对象冒充继承
function Person(name) {
this.name = name;
}
Person.prototype.getName = function (name) {
return this.name;
}
Person.prototype.setName = function (name) {
this.name = name;
}
Person.prototype.action = function (name) {
console.log('我是' + this.name)
}
Person.info = function(){
//静态方法，实例化对象不能调用，只能通过 Person.info()来调用
console.log('info')
}
Person.age = '20';
//静态属性，只能通过 Person.age来使用function Teacher(name){
Person.call(this,name)
}
Teacher.prototype = new Person();
let teacher = new Teacher('王五');
console.log(teacher)
console.log(teacher.getName())
二.es6
//1。创建类和实例化对象，还不支持私有方法和属性
class Person{
static age = '20';
//静态属性
constructor(name) {
this.name = name;
}
getName(){
return this.name;
}
static action(){
//静态属性
console.log(`我是${this.name}`)//此处的name 是Person类的name属性，不是实例的属性
}
}
let person = new Person('张三');
console.log(person);
console.log(person.getName());
//张三
console.log(Person.age);
//20
Person.action();
//我是Person
//2。继承
class Teacher extends Person{
constructor(name,age){
super(name)//super关键字调用了父类的构造函数
this.age = age;
}
getAge(){
return this.age;
}
}
let teacher = new Teacher('李四',23);
console.log(teacher);
console.log(teacher.getName());
console.log(teacher.getAge());
三.typescript
//1.类的创建及实例化
class Person{
name:string;
//实例化对象属性，默认是public修饰,必须声明才能在构造函数中赋值
static name1:string = '李四';
//静态属性,只能通过Person.name来访问
protected name2:string = '王五';
//受保护的属性，只能在本类和子类中使用,不能在实例化对象上访问
private name3:string = '赵六';
//私有属性，只能在本类中使用，不能在实例化对象上访问
constructor(na:string){
this.name = na;
}
getName(){
//实例化对象方法
return this.name;
}
static getName1(){
//静态方法，只能通过Person.getName1()来访问
return this.name1;
}
protected getName2(){
//受保护方法，只能在本类及子类中通过this.getName1()来访问
return this.name2;
}
private getName3(){
//静态方法，只能在本类中通过Person.getName1()来访问
return this.name3;
}
}
let person = new Person('张三');
console.log(person);
console.log(person.getName());
//2.继承
class Teacher extends Person{
public age:number;
constructor(na:string,ag:number){
super(na)//继承了父类的属性和方法
this.age = ag;
}
getAge(){
return this.age;
}
}
let teacher = new Teacher('呼保义',20);
console.log(teacher)
console.log(teacher.getName())
console.log(teacher.getAge())
//3.封装:通过公有方法来访问私有属性，get和set实例化对象
class Woker{
private name:any;
constructor(na:any){
this.name = na;
}
getName(){
return this.name
}
setName(name:any){
this.name = name
}
}
console.log('--------------')
let worker = new Woker('玉麒麟');
console.log(worker.getName())
worker.setName('霹雳火')
console.log(worker)
【es5、es6、typescript中的类和对象】
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 螃蟹和这些食物同吃，轻则腹泻、重则中毒！要小心哦~