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