es6 的 构造函数的写法 与类的继承!!

本文详细介绍了ES6中构造函数的写法和类的继承机制,通过实例展示了如何创建类以及如何使用`extends`和`super`关键字进行继承。同时,总结了JavaScript实现继承的多种方式,包括对象冒充、ES6的`class`关键字、构造函数绑定和原型继承,分析了各种方法的优缺点。
摘要由CSDN通过智能技术生成

es6 的 构造函数的写法

// es6中构造函数的写法
		class Parent {
			constructor(name, age, food) {
				this.name = name
				this.age = age
				this.food = food
			}
			eat(){	
				alert(this.name + '在吃' + this.food)
			}
		}
		let ren = new Parent("suke", 18, '包子')

		console.log(ren);
		console.log(ren.eat());

类的继承!!

	// es6 继承!!
		class Erzi extends Parent {
			constructor(name,age,food,sex,daima){
				super(name,age,food)
				this.sex = sex
				this.daima = daima
			}
			xiedaima(){
				alert(this.name+'吃'+ this.sex +'然后去'+this.daima)
			}
		}
		let erzi = new Erzi('suke',12,'nan','包子','写代码')
		console.log(erzi);
		console.log(erzi.eat());
### ES6的类和继承
class Person {
		constructor(name,age,sex){
			this.name = name;
			this.age = age;
			this.sex = sex;
		}
		sayName(){
			alert(this.name)
		}
	}
	let wdw = new Person("王大伟",18,'男')
	

	class SuperMan extends Person{
		constructor(name,age,sex,skill){
			// 继承父类的私有属性
			super(name,age,sex)
			this.skill = skill
		}
		dazhao(){
			alert(this.skill)
		}
	}

	let gangtiexia = new SuperMan("钢铁侠",18,"男","钞能力");

	class Person {
		constructor(name,age,sex){
			this.name = name;
			this.age = age;
			this.sex = sex;
		}
		sayName(){
			alert(this.name)
		}
	}
	let wdw = new Person("王大伟",18,'男')
	

	class SuperMan extends Person{
		constructor(name,age,sex,skill){
			// 继承父类的私有属性
			super(name,age,sex)
			this.skill = skill
		}
		dazhao(){
			alert(this.skill)
		}
	}

  let gangtiexia = new SuperMan("钢铁侠",18,"男","钞能力");

总结!!!

JS如何实现继承

  1. 使用对象冒充:
    在这里插入图片描述—
  • 理解:
    在本构造函数中将其他构造函数视为本类的一个属性,并执行,从而实现了对超类的拷贝
  • 优点:
    简单直接,思路清晰,可以实现多重继承,体现了类似Java等语言面向对象的原理
  • 缺点:
    由于将其他构造函数的属性和方法嵌套到本类来,难免会发生属性和方法冲突,由于程序是自上到下运行的,先定义的同名的属性和方法会被覆盖掉。
  1. 使用es6 class关键字实现
    在这里插入图片描述—
  • 理解:
    使用class / expends / super 关键字模拟Java等语言面向对象的原理,实现继承,本质上是对原型继承的封装与改写,形式更加纯正。
  • 优点:
    形式体现了面向对象的风格,易于理解
  • 缺点:
    只能在es6中使用,配合js其他语法(如对象扩展符,原型方法等)容易产生混淆和误解
  1. 构造函数绑定
    在这里插入图片描述—
  • 理解:
    改变超类的执行环境,在基类实例的运行环境中运行,使得基类实例拥有超类构造函数的所有方法和属性。
  • 优点:
    代码简洁,可以在call或apply方法中传参,获取超类非预定义属性(有传入变量决定属性)
  • 缺点:
    基类无法继承超类原型上的方法,属性和方法继承会出现覆盖问题。
  1. 原型继承
    在这里插入图片描述—
  • 理解:
    改变基类的原型,指向超类的实例,进而实现继承。
  • 优点:
    各类js继承的核心和晕头,是js语言的灵魂之处;基类可以获得超类原型上的属性和方法;可以向超类原型中传参。
  • 缺点:
    理解难度高;无法实现多重继承(基类prototype只能绑定为一个超类的实例);注意属性和方法的覆盖问题;原型继承将会因为原型链上溯(还有一个类继承了基类)而出现混淆问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值