es5中的类

es5中的类 构造函数

function Person(){
	this.name = 'alex' // 属性
	this.age = 22 // 属性
}

var p = new Person()
p.name // alex

构造函数和原型链增加方法

function Person(){
	this.name = 'alex' // 属性
	this.age = 22 // 属性
	// 实例方法 new Person()调用
	this.run = function () {
		console.log(`${this.name}在运动`)
	}
}

原型链上面的属性会被多个实例共享 构造函数不会

Person.prototype.sex = '男'
Person.prototype.work = function () {
	console.log(`${this.name}在工作`)
}

静态方法

Person.getInfo = function () {
	console.log('我是静态方法')
}
var p = new Person()
p.run()
p.work()
调用静态方法,直接类名调用,不用实例化
Person.getInfo()

es5的继承

function Person(){
	this.name = 'alex'
	this.age = 19
	this.run = function () {
		console.log(`${this.name}在运动`)
	}
}

Person.sex = '男' 
Person.prototype.work = function (){
	console.log(`${this.name}在工作`)
}

Web类继承Person类 原型链+对象冒充的组合继承模式

function Web(){
	// 对象冒充实现继承
	Person.call(this)
}

var w = new Web()
w.run() // 对象冒充可以继承构造函数的属性和方法
w.work() // 报错 对象冒充可以继承构造函数的属性和方法 但是没法继承原型链上的属性和方法

原型链继承

function Teacher(){}
Teacher.prototype = new Person() // 原型链实现继承
// 原型链继承既能继承构造函数的属性和方法,也能继承原型链上的属性和方法
var t = new Teacher()
t.run()
t.work()

原型链实现继承问题

function Person(name, age){
	this.name = name
	this.age = age
	this.run = function () {
		console.log(`${name}在运动`)
	}
}

Person.prototype.work = function () {
	console.log(`${this.name}在工作`)
}
function Web(name, age){}

Web.prototype = new Person('lucy', 22)
var w = new Web('alex', 19) // 实例化子类的时候无法给父类传参
w.run() // lucy在运动
w.work() // lucy在工作

原型链+对象冒充的组合继承

function Person(name, age){
	this.name = name
	this.age = age
	this.run = function () {
		console.log(`${this.name}在运动`)
	}
}
Person.prototype.work = function () {
	console.log(`${this.name}在努力工作,因为他要还房贷`)
}
function Web(name, age) {
	Person.call(this, name, age) // 冒充对象实例化子类可以给父类传参
}
Web.prototype = new Person('lucy', 19)
var w = new Web('alex', 28)
w.run() // alex在运动
w.work() // alex在努力工作,因为他要还房贷

原型链+对象冒充的另一种方式

function Person(name, age){
	this.name = name
	this.age = age
	this.run = function () {
		console.log(`${this.name}在运动`)
	}
}
Person.sex = '男'
Person.prototype.work = function (){
	console.log(`${this.name}在工作`)
}
function Web(name, age){
	Person.call(this, name, age)
}
Web.prototype = Person.prototype
var w = new Web('lily', 19)
ES5和ES6在语法上有一些显著的区别。以下是主要的区别: **1. 语法差异**: - ES5 定义使用`function`关键字,然后使用`prototype`属性来继承和添加原型方法,例如: ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log('Hello, ' + this.name); } ``` - ES6 则引入了`class`关键字,并直接继承自`Object`(而不是通过`prototype`),如: ```javascript class Person { constructor(name) { this.name = name; } sayHello() { console.log('Hello, ' + this.name); } } ``` **2. 构造函数自动绑定**: - ES5 需要手动使用`call`、`apply`或`bind`来确保构造函数内的`this`指向实例,而ES6的`constructor`默认会绑定到新创建的对象。 - ES5 示例: ```javascript var person = new Person('Alice'); person.constructor.call(person); // 需要明确指定this指向 ``` - ES6 示例: ```javascript new Person('Alice'); // constructor 自动绑定到实例 ``` **3. 方法定义位置**: - ES5 方法通常放在体内部或`prototype`上。 - ES6 支持将方法定义在外部并通过`static`关键字标记为静态方法,或者直接在体内部定义。 **4. 更现代的功能**: - ES6 还支持更高级特性,如访问修饰符(`public`, `private`, `protected`)、继承链的改变(`super`),以及表达式等。 总的来说,ES6的语法简洁,更接近传统面向对象语言的设计,使得代码更易读易维护。同时,它也提供了更多的特性和便利性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值