JavaScript 继承,原型继承
程序员文章站
2022-03-04 14:10:51
...
demo.html(不使用原型,直接继承)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//当前没有的属性和方法，别人有，拿过来用 ，就是继承
var o = { // 子类对象。
}
var parent = { // 要继承的对象。
name :"张三",
age : 18,
sayHello :function () {
console.log("Hello world");
}
}
//混入式继承
for(var k in parent){
o[k] = parent[k];
}
console.log(o);
</script>
</head>
<body>
</body>
</html>demo.html（使用原型继承的三种方式）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//原型继承(往子类原型中添加要继承的属性和方法)
//原型继承的三种方式
//一、给子类的原型对象中添加成员（通过对象的动态特性） 不是严格意义上的继承
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () { // 直接为子类原型添加要继承的方法。
console.log("我想死你了");
}
var p = new Person("冯巩",50);
p.sayHello();
//这里的p对象就继承原型
//////////////////////////////////////////////////////////////////////
//二、直接替换原型对象
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function () {
console.log("Hey man");
}
var parent = {
sayHello : function () {
console.log("我想死你了");
}
}
//
Person.prototype = parent; // 直接为子类原型替换成要继承的对象。 原型原有的成员会丢失。
var p = new Person("冯巩",50);
p.sayHello();
// p.sayHi(); 替换之后，sayHi方法不复存在
//p对象继承了原型对象（parent对象）
//注意：使用替换原型的方式实现继承的时候，原型中原有的成员就会丢失
/////////////////////////////////////////////////////////////////////////
//三、利用混入的方式(for in 遍历)给原型对象添加成员
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function () {
console.log("Hey man");
}
var parent = {
sayHello : function () {
console.log("我想死你了");
}
}
for(var k in parent){
Person.prototype[k] = parent[k]; // 通过for遍历添加要继承的方法/属性 (用k赋值时,要用[],不能用点语法)
}
var p = new Person("冯巩",50);
p.sayHello();
//也是实现了继承 p继承自原型对象
</script>
</head>
<body>
</body>
</html>上一篇： 谈谈CSS实现水平垂直居中布局的方法
下一篇： npm install安装报错