ES5原型继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>原型继承</title>
</head>
<body></body>
<script>
class Father {}
class Son extends Father {}
const s = new Son();
console.log(s);
console.log(s.__proto__ === Son.prototype);
console.log(Son.prototype.__proto__ === Father.prototype);
console.log(Son.__proto__ === Father);
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function () {
console.log(this.name + "正在说话");
};
function Student(name, age, stuno) {
Person.call(this, name, age);
this.stuno = stuno;
}
console.log(new Student("张三", 19, "0001"));
Student.prototype.__proto__ = Person.prototype;
Student.__proto__ = Person;
console.log(new Student("李四", 20, "0002"));
</script>
</html>
ES5原型继承 - 元素创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ES5原型继承-元素创建</title>
<style>
.element {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #00ffff;
text-align: center;
font-size: 30px;
line-height: 200px;
overflow: hidden;
float: left;
}
</style>
<script src="./js/ES5 - CreateElement.js"></script>
</head>
<body></body>
<script>
const div = new CreateElement("div", "element", "做人,开心就好");
div.appendTo("body");
const img = new CreateImg("images/帅哥.png", "element");
img.appendTo("body");
</script>
</html>
js文件 - ES5 - CreateElement.js
function CreateElement(tag, className, txt) {
this.ele = document.createElement(tag);
this.ele.className = className;
this.ele.innerHTML = txt;
}
CreateElement.prototype.appendTo = function (selector) {
let parent = document.querySelector(selector);
parent.appendChild(this.ele);
};
function CreateImg(src, className) {
CreateElement.call(this, "img", className, "");
this.ele.src = src;
}
CreateImg.prototype.__proto__ = CreateElement.prototype;
CreateImg.__proto__ = CreateElement;