|
|
@@ -0,0 +1,49 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * 2.构造函数的继承(call/apply)
|
|
|
+ *
|
|
|
+ */
|
|
|
+ function Father() {
|
|
|
+ this.name = 'LiLi';
|
|
|
+ this.color = 'red';
|
|
|
+ this.arr = [1,2,3];
|
|
|
+ this.fn1 = function() {
|
|
|
+ console.log("这是第一个方法");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Father.prototype.getColor = function() {
|
|
|
+ return this.color;
|
|
|
+ }
|
|
|
+ function Child() {
|
|
|
+ Father.call(this);
|
|
|
+ }
|
|
|
+ let newChild = new Child();
|
|
|
+ newChild.fn1();
|
|
|
+ console.log(newChild);
|
|
|
+ let a1 = new Child();
|
|
|
+ let a2 = new Child();
|
|
|
+ a1.name += 10;
|
|
|
+ a2.name += 20;
|
|
|
+ a2.arr.push(10);
|
|
|
+ console.log(a1,'a1');
|
|
|
+ console.log(a2,'a2');
|
|
|
+ /**
|
|
|
+ * 构造函数继承可以解决原型链继承的同时修改引用数据类型的缺点
|
|
|
+ * 可以使用父级构造函数上的属性和方法
|
|
|
+ * 不可以使用父级原型上的属性和方法
|
|
|
+ */
|
|
|
+ console.log(newChild.getColor());
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e