|
|
@@ -0,0 +1,74 @@
|
|
|
+<!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>
|
|
|
+ // function fn1() {
|
|
|
+ // console.log(this,'fn1')
|
|
|
+ // return 1;
|
|
|
+ // }
|
|
|
+ // console.log( fn1())
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ * 1.首字母大写
|
|
|
+ * 2.使用时 通过new去进行实例化
|
|
|
+ * 3.this执行当前函数本身
|
|
|
+ * 4.反出值 不用return
|
|
|
+ * 属性 写在构造函数下
|
|
|
+ * 方法 写在原型下
|
|
|
+ */
|
|
|
+ // function Fn2() {
|
|
|
+ // console.log(this,'fn2');
|
|
|
+ // return 2
|
|
|
+ // }
|
|
|
+ // console.log(new Fn2(),'调用')
|
|
|
+ function Person(name, age) {
|
|
|
+ this.name = name;
|
|
|
+ this.age = age;
|
|
|
+ console.log(this.name, this.age)
|
|
|
+ }
|
|
|
+ Person.prototype.address = function () {
|
|
|
+ console.log('我叫' + this.name, '我叫住在翻斗花园')
|
|
|
+ }
|
|
|
+ let p1 = new Person("图图", 3)
|
|
|
+ console.log(p1)
|
|
|
+ p1.address();
|
|
|
+ /**
|
|
|
+ * 原型：
|
|
|
+ * 1.构造函数中自带了constructor(构造器)和prototype(原型对象/显性方法)
|
|
|
+ * 2.实例对象中自带了_proto_方法 指向当前对象原型
|
|
|
+ * 3.prototype 与 _proto_ 等价的
|
|
|
+ * 4.constructor指向的是prototype的构造函数
|
|
|
+ *
|
|
|
+ * 原型链：
|
|
|
+ * 访问对象属性时 先从对象本身属性上寻找
|
|
|
+ * 通过 _proto_ 去原型上寻找
|
|
|
+ * 若还没找到 则在原型对象prototypes上寻找 找到就返回 未找到(undefined)/null
|
|
|
+ *
|
|
|
+ *
|
|
|
+ *
|
|
|
+ *
|
|
|
+ * 面试题
|
|
|
+ * 所有的函数数据类型都天生自带一个prototype属性，该属性的属性值是一个对象，指向原型
|
|
|
+ prototype的属性值中天生自带一个constructor属性，其constructor属性值指向当前原型所属的构造函数/类
|
|
|
+ 所有的对象数据类型（实例），都天生自带一个_proto_属性，该属性的属性值指向当前实例所属类的原型
|
|
|
+ 总结
|
|
|
+ 把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象）
|
|
|
+ ，然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。
|
|
|
+ 而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。
|
|
|
+ 而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制
|
|
|
+ ，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，
|
|
|
+ 最终会返回undefined
|
|
|
+
|
|
|
+
|
|
|
+ */
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zheng
