扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“JS继承实现方式有哪些”,在日常操作中,相信很多人在JS继承实现方式有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS继承实现方式有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联服务项目包括泸州网站建设、泸州网站制作、泸州网页制作以及泸州网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,泸州网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到泸州省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
什么是继承?
继承就是让一个类型(可以通过构造函数或者class来定义)的对象能够访问另外一个类型的属性和方法,它是类和类之间的一种关系,通常说子类继承父类。但这里容易出现一个误区:认为实例继承了某个类,某人有响应的属性和方法是因为他继承人类,这种说法是错误。
实现继承的方式有很多种,小编给大家分享四种:借助构造函数实现继承、原型继承、组合继承、ES6继承。
1、借助构造函数实现继承
function Person(name,age){ //定义了一个父类
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name);
}
}
function Male(name,age){ //定义了一个子类 男性类
//继承父类,让子类具有相应的属性和方法
//call或者apply的用法
//构造函数里的this指向实例
Person.call(this,name,age);
this.hx = "true";//除了继承过来的属性和方法,还能添加针对于子类自身的属性和方法
}
function FeMale(name,age){ //定义了一个子类 女性类
Person.call(this,name,age);
this.hj = "no";
}
var male = new Male("chenjinfeng",20);
male.sayHello();
2、原型继承
function Person(){
}
Person.prototype.name = "john";
Person.prototype.age = 20;
Person.prototype.sayHello = function(){
console.log(this.name);
}
function Male(){
}
Male.prototype = new Person();//Male.prototype.__proto__ == Person.prototype 通过这行代码就实现继承
//查找流程 male的__proto__(Male.prototype)上面有没有sayHello,
//如果没有继续查找 male.__proto__.__proto__(Male.prototype.__proto__) 就是查找 Person.prototype
var male = new Male();
male.sayHello();
3、组合继承
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function(){
console.log(this.name);
}
function Male(name,age){
Person.call(this,name,age);//只能继承实例属性
}
//只考虑继承原型方法 是不是就可以了 让Male的原型对象也有Person原型对象上的方法
/* Male.prototype = Person.prototype;
//sayHi方法是我子类独有的方法
Male.prototype.sayHi = function(){
console.log("hi");
}
var male = new Male("john",20);
male.sayHello();
var person = new Person("aa",22);
person.sayHi();//完了,父类居然能访问子类的方法,继承彻底乱了,原因是 Male.prototype 和 Person.prototype指向一样,任何一方改变,都会影响另一方 */
for(let attr in Person.prototype){
Male.prototype[attr] = Person.prototype[attr];
}
Male.prototype.sayHi = function(){
console.log("hi");
}
var male = new Male("john",20);
male.sayHello();
male.sayHi();
var person = new Person("aa",22);
person.sayHi();
4、ES6继承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(){
console.log(this.name);
}
//扩展,定义类方法
static foo(){
console.log("这是类方法,不是实例方法");
}
}
//通过extends这个关键字实现继承
class Male extends Person{
constructor(name,age){
super(name,age);//1.创建this对象2.super指向父类的构造函数
this.sexy = "男";//添加子类的实例属性
}
//在子类的原型方法里使用了父类的原型方法
sayHi(){
console.log("hi");
super.sayHello();//super指向谁?指向父类的原型对象
}
static foo1(){
super.foo(); //super指向父类
}
}
var male = new Male("john",20);
//male.sayHello();
male.sayHi();
Male.foo1();
到此,关于“JS继承实现方式有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流