1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11 /**
12 1.什么是原型
13 1-1：构造函数的prototype属性就是原型
14 1-2：只有构造函数才有prototype属性
15 1-3：构造函数一旦被创建，js引擎就帮我们自动创建好了prototype属性
16 1-4：prototype属性的值就是一个对象，主要作用就是用来共享数据
17 */
18
19 /**
20 2.原型的使用原则
21 2-1：将公用的属性或者方法放在原型上（如果直接放在构造函数上会比较占用内存，浪费资源）
22 2-2：由构造函数创建出来的对象，会默认链接到它的原型上，也就是构造函数的prototype属性上
23 */
24 // ex
25 var demoObj =
function (obj) {
26 this.name =
obj.name
27 }
28 console.log(demoObj.prototype,
typeof demoObj.prototype)
// prototype属性的值是一个对象
29
30 // 尝试给构造函数的prototype属性添加属性
31 demoObj.prototype.siHi =
function () {
32 console.log(`哈哈`)
33 }
34 // 实例化对象
35 var newObj =
new demoObj({
36 name: 'ethans'
37 })
38 // 我们发现实例化的对象直接可访问到构造函数的prototype属性上（这里有一个属性搜索原则的问题（即先去构造函数中查看，如果没有就会上他的原型中去找））
39 newObj.siHi()
40
41 /**
42 3.非标准属性__proto__
43 3-1: 实例化出来的对象都有一个__proto__属性
44 3-2：这个属于是非标准的，是浏览器提供的
45 3-3：对象的__proto__和构造函数的prototype指向同一个对象
46 */
47 console.log(newObj.__proto__ === demoObj.prototype)
// true
48
49 /**
50 4.prototype和__proto__的区别于联系
51 4-1：实例对象具有__proto__属性
52 4-2：构造函数具有prototype属性
53 4-3：实例对象的__protp__属性和构造函数的prototype属性指向同一个对象即：newObj.__proto__ === demoObj.prototype
54 4-4: __proto__是一个非标准属性，不要再实际项目中使用，可以再开发阶段用来查看的对象的原型是哪一个
55 */
56
57 /**
58 5.constructor
59 5-1: 只要是构造函数就会有一个prototype属性；
60 5-2：默认情况下prototype中会有一个constructor属性；
61 5-3：prototype中的constructor属性又指向了当前的构造函数
62 */
63 console.log(demoObj.prototype.constructor === demoObj)
// true
64 </script>
65 </body>
66 </html>
6.prototype和__proto__和constructor三者的关系图
7.属性搜索原则
7.1 先会在对象本身查找，如果找到了该属性，就直接返回
7.2 如果没有找到就会到 原型对象 中查找属性，如果找到了就会返回
7.3 如果在原型中没有找到该属性，会会到 原型对象 的 原型对象 中查找
7.4 直到搜索到 Object.prototype ，如果找到了，就直接返回， 如果还没有找到，就会返回undefined
var Person = function(){}
var p = new Person();
// 给构造函数的原型添加属性
// Person.prototype.name = '小明';
// 给构造函数的原型的原型对象添加属性
// Person.prototype.__proto__.name = '小明';
// 构造函数的原型的原型对象其实质就是Object.prototype
console.log(Person.prototype.__proto__===Object.prototype);//=>true
Object.prototype.name='小明';
console.log(p.name);
// 属性搜索原则，
// 先去构造函数中去找，如果找到了就直接返回，如果没有
// 再去构造函数的原型中去找，如果找到了，就直接返回，如果没有
// 再去构造函数的原型的原型对象中去找，找到了就返回，如果没有
// 再去原型对象的原型对象的原型对象中去找，如果找到了就直接返回，如果还没有就返回undefined
// 翻译成代码就是，Person.prototype=>Person.prototype.__proto__(Object.prototype)=>null
8.查找toString的过程
function Person() {
}
var p1 =
new Person();
// 查找toString方法的过程：
// 1 在 p1 中找
// 2 在 Person.prototype 中查找
// 3 在 Person.prototype 的原型中查找
p1.toString();
console.log(p1.__proto__)
console.log(p1.__proto__.__proto__)
console.log(p1.__proto__.__proto__.__proto__)
console.log('toString'
in p1.__proto__);
//true
9.面向对象的三大特征
封装
将复杂的代码逻辑进行封装，将简单的调用暴露出来
使用函数进行封装；
函数是对一段代码逻辑的封装
目的：是为了对一段代码逻辑进行复用
对象：无序键值对的集合
对象是对数据（属性）和行为（方法的）封装
继承
子类会从父类中继承属性和方法，这样子类就可以使用父类中的方法和属性
多态
转载于:https://www.cnblogs.com/songdongdong/p/6921917.html
