宁波网站建设费用,wordpress 卡片主题,百度快照网址,成都网站优化排名推广说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;哈哥撩编程#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xff0c;目前在公司… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者哈哥撩编程十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 继承 什么是继承 通过原型链实现继承 借助构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承 ⭐ 继承
在JavaScript中继承是一种允许我们创建一个类子类从已有的类父类上继承所有的属性和方法的机制。这样的机制有助于我们复用和重用代码。
JavaScript原型链实现了继承。每一个对象都有一个内部属性[[prototype]]这个属性是一个链接/link也就是一个指针它指向了创建这个对象的函数的原型对象prototype。其实这就是“原型链”的起点通过这个链子对象可以访问到父对象的属性。
在ES6之后JavaScript又引入了基于类的继承这种继承方式更接近于传统的面向对象语言如JavaC等。虽然JavaScript是基于原型的语言但是为了更好地与其他面向对象编程语言交流和学习ES6引入了class和extends关键字来实现基于类的继承。
但是无论是原型链继承还是ES6的类继承其本质上都是原型继承只是类继承更易于理解和使用。 什么是继承
先来看两个无关的类People和Vehicle这两个类分别描述人类和机动车。People类含有的属性有name(姓名)、age(年龄)、sex(性别)方法有sayHello(打招呼)、sleep(睡觉)Vehicle类含有的属性有brand(品牌)、color(颜色)、engineType(发动机型号)、seatingCapacity(座位容量)方法有move(移动)、whistle(鸣笛)可以看出他们的属性和方法几乎没有重复和相关的所以他们是两个无关的类 上面两个图形是来源于UML的类的图形化表示法。UML是一种统一建模语言我们作为开发者能看懂图就可以了不需要深入的了解UML的具体使用方式
再来看两个有关的类People和Student这两个类分别描述人类和学生。Student类含有的属性有name(姓名)、age(年龄)、sex(性别)、studentNumber(学号)、school(学校)方法有sayHello(打招呼)、sleep(睡觉)、study(学习)、exam(考试)。
我们可以发现
People类拥有的属性和方法Student类都有并且Student类还扩展了一些属性和方法Student是一种People两类之间是“is a kind of”关系 这就是**“继承”**关系Student类继承自People类 People是**“父类”或“超类”、“基类”Student是“子类”**或”派生类“ 子类丰富了父类让类描述的更具体更细化 在UML中用空心的箭头来描述继承关系箭头指向父类 更多继承关系的举例
父类子类PeopleStudent、TeacherVehicle机动车Car小轿车、Truck卡车、Motocycle摩托车Applicance家用电器Television电视、Refrigerator冰箱Publication出版物Book书籍、Magazine杂志
往往一个类只是一个继承”链“中的一环比如子类也可以有自己的子类父类也会有自己的父类。所以面向对象方法实际上是模仿了自然界中描述自然事物的方法这样就使面向对象的编程方式非常容易被理解。
JavaScript 中如何实现继承 实现继承的关键在于子类必须拥有父类的全部属性和方法同时子类还应该能定义自己特有的属性和方法 使用JavaScript特有的原型链特性来实现继承是普遍的做法 通过原型链实现继承
首先定义一个构造函数Peolpe我们可以在People.prototype上定义一些人类的方法比如sayHello()、sleep()等然后new出来一个People的实例。然后让Student构造函数的prototype直接指向People的实例关键步骤我们把study()方法和exam()方法直接定义到People的实例上。这样的巧妙之处在于如果我们new出来一个student如Hanmeimei就可以行成了一个原型链Hanmeimei可以调用study()和exam()方法也可以调用sayHello()和sleep()方法。 下面来敲一些这个demo:
// 父类
function People(name, age, sex) {this.name name;this.age age;this.sex sex;
}People.prototype.sayHello function () {console.log(你好我是 this.name 我今年 this.age 岁了);
}
People.prototype.sleep function () {console.log(我要睡觉了zzzzzz);
}// 子类
function Student(name, age, sex, school, studentNumber) {this.name name;this.age age;this.sex sex;this.school school;this.studentNumber studentNumber;
}
// 关键语句实现继承 这个语句一定要写在这个位置位于定义子类语句和增加子类原型方法的中间
Student.prototype new People(); // 将子类的prototype指向父类的一个实例Student.prototype.study function () {console.log(this.name 正在学习);
}
Student.prototype.exam function () {console.log(this.name 正在考试。。。);
}var hanmeimei new Student(韩梅梅, 12, 女, 实验小学, 10001);
hanmeimei.study();
hanmeimei.sayHello();子类也可以重写父类的一些原型方法比如我们将上述案例中的sayHello()方法在Student中重写 demo如下
// 子类中重写sayHello()方法
Student.prototype.sayHello function () {console.log(敬礼您好我是 this.name ,我今年 this.age 岁了);
}综上我们可以总结出面向对象编程的特质如下(重点一定要理解) 面向对象的本质定义不同的类让类的实例工作面向对象的优点程序编写更清晰、代码结构更严密、使代码更健壮更利于维护面向对象经常用到的场合需要封装和复用性的场合组合性思维 借助构造函数 为了解决原型中包含引用类型值所带来问题和子类构造函数不优雅的问题开发人员通常使用一种叫做”借助构造函数“的技术也被称为”伪造对象“或”经典继承“ 借助构造函数的思想非常简单在子类构造函数的内部调用超类的构造函数但是要注意使用call()绑定上下文 优雅的在子类中使用父类的属性和方法
function People(name, sex, age) {this.name name;this.sex sex;this.age age;this.arr [11, 22, 33]; // 引用类型值父类的引用类型值会写到实例的身上
}
function Student(name, sex, age, school, sid) {People.call(this, name, sex, age); // 使用call绑定上下文this.school school;this.sid sid;
}
Student.prototype new People();var xiaoming new Student(小明, 男, 10, 实验小学, 100001);
xiaoming.arr.push(66)
console.log(xiaoming);var xiaohong new Student(小红, 女, 11, 实验小学, 100002);
console.log(xiaohong);组合继承 将通过原型链和借用构造函数的技术组合到一起叫做组合继承也叫做伪经典继承 组合继承是JavaScript中最常用的继承方式 示例代码
// 父类
function People(name, sex, age) {this.name name;this.sex sex;this.age age;
}
People.prototype.sayHello function () {console.log(你好我是 this.name ,我今年 this.age 岁了);
}
People.prototype.sleep function name(params) {console.log(我要睡觉了zzzzzz);
}
// 子类
function Student(name, sex, age, school, sid) {// 借助构造函数People.call(this, name, sex, age);this.school school;this.sid sid;
}
// 实现继承通过原型链
Student.prototype new People();
Student.prototype.exam function () {console.log(this.name 正在考试。。。);
}var xiaoming new Student(小明, 男, 10, 实验小学, 100001);
xiaoming.sayHello();
xiaoming.sleep();
xiaoming.exam();组合继承的缺点组合继承最大的问题就是无论什么情况下都会调用两次父类的构造函数一次是在创建子类原型的时候另一次是在子类构造函数的内部这就会造成效率的浪费。
虽说组合继承有缺点但无伤大雅依然是JS中最常用的继承方式一定要掌握这种继承的技巧。 原型式继承 在没有必要“兴师动众”地创建构造函数而只是想让新对象与现有对象“类似”的情况下使用Object.create()即可胜任称为原型式继承 认识Object.create()方法 IE9开始支持Object.create()方法可以根据指定的对象为原型创建出新对象Object.create()让我们可以不借助任何构造函数就让一个对象的__proto__指向另一个对象 Object.create() 还支持再传入一个参数用于补充或重写新的属性示例代码
var obj1 {a: 11,b: 22,c: 33,test: function () {console.log(this.a this.b);}
};var obj2 Object.create(obj1, {d: {value: 44},a: {value: 111}
})console.log(obj2.__proto__ obj1);
console.log(obj2.a); // 111因为重写了obj2的a属性就会把从obj1继承的属性值覆盖
console.log(obj2.b); // 22
console.log(obj2.c); // 33
console.log(obj2.d); // 44obj2.test(); // 133 (11122133)Object.create()的兼容性写法----面试常考
如何在低版本浏览器实现Object.create()方法呢示例代码
// 道格拉斯•克洛克福德写的一个函数,非常巧妙,面试常考
// 函数的功能就是以o为原型,创建新对象
function object(o) {// 创建一个临时构造函数function F() { }// 让这个临时构造函数的prototype指向o,这样一来它new出来的对象,__proto__就指向了oF.prototype o;// 返回F的实例return new F();
}var obj1 {a: 11,b: 22
}
var obj2 object(obj1);console.log(obj2.__proto__ obj1);
console.log(obj2.a);
console.log(obj2.b);寄生式继承 寄生式继承编写一个函数它接收一个参数o返回以o为原型的新对象p同时给p上添加预置的新方法 寄生式继承仰赖一个函数对象o需要传给这个函数这个函数内部要创建一个新对象这个新对象的__proto__指向o,函数内部对o进行“加工”然后再输出一个新对象p新对象上添加了一些预置的新方法 新的对象感觉像是“寄生”在原来的对象上面所以叫做“寄生”式继承 示例代码
var obj1 {a: 11,b: 22
}
var obj2 object(obj1);console.log(obj2.__proto__ obj1);
console.log(obj2.a);
console.log(obj2.b);var o1 {name: 小明,age: 12,sex: 男
}
var o2 {name: 小红,age: 11,sex: 女
}// 寄生式继承
function f(o) {// 以o为原型创建出新对象var p Object.create(o);// 补充新方法p.sayHello function () {console.log(你好我是 this.name ,我今年 this.age 岁了);}// 补充新方法p.sleep function () {console.log(我要睡觉了zzzzzz);}return p;
}var p1 f(o1);
p1.sayHello();var p2 f(o2);
p2.sayHello();总结 寄生式继承就是编写一个函数它可以“增强对象”只要把对象传入这个函数这个函数将以此对象为“基础”创建出新对象并为新对象赋予新的预置方法在主要考虑对象而不是自定义类型和构造函数的情况下寄生式继承也是一种有用的模式和原型式继承相比寄生式继承封装性更强就像一个小工厂可以对一个对象进行加工产生一个新的对象 寄生式继承的缺点 使用寄生式继承来为对象添加函数会由于不能做到函数复用而降低效率即“方法没有写到prototype上” 寄生组合式继承
之前提到的组合继承最大的问题就是无论什么情况下都会调用两次超类的构造函数一次是在创建子类原型的时候另一次是在子类构造函数的内部。那么如何可以避免这个问题呢利用寄生组合式继承就可以避免调用两次超类的构造函数问题。 寄生组合式继承通过借用构造函数来继承属性通过原型链的混成形式继承方法 寄生组合式继承背后的基本思路是不必为了指定子类型的原型而调用超类型的构造函数我们所需要的无非就是超类型原型的一个副本而已 。本质上就是 使用寄生式继承来继承超类型的原型然后再将结果指定给子类型的原型。 示例代码
// 父类
function People(name, sex, age) {this.name name;this.sex sex;this.age age;
}
People.prototype.sayHello function () {console.log(你好我是 this.name ,我今年 this.age 岁了);
}
People.prototype.sleep function name(params) {console.log(我要睡觉了zzzzzz);
}
// 子类
function Student(name, sex, age, school, sid) {// 借助构造函数People.call(this, name, sex, age);this.school school;this.sid sid;
}// 调用我们自己编写的inheritPrototype函数
// 这个函数可以让Student类的prototype指向以“People.prototype为原型的一个新对象”
inheritPorpotype(Student, People);// 子类中重写sayHello()方法
Student.prototype.sayHello function () {console.log(敬礼您好我是 this.name ,我今年 this.age 岁了);
}
Student.prototype.exam function () {console.log(this.name 正在考试。。。);
}var xiaoming new Student(小明, 男, 10, 实验小学, 100001);
xiaoming.sayHello();
xiaoming.sleep();
xiaoming.exam();instanceof运算符instanceof运算符用来检测“某个对象是不是某个类的”
总结
继承已经学习完毕了下面我们来总结一下继承的几种方式 其中组合继承是JavaScript中最常用的继承方式一定要熟悉并掌握这几种继承方式这些都是我们开发过程中常用的编码技巧。
