js参考---原型prototype

js参考---原型prototype

一、总结

一句话总结:

我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象

1、对象的__proto__属性是干嘛的?

当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性

2、原型对象的作用?

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。

3、原型机制对一个对象属性和方法的影响?

当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用

4、原型的存储方式?

同一个构造函数的所有对象的__proto__属性都指向原型对象,原型对象也有自己的原型

二、原型prototype

博客对应课程的视频位置:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             /*
 8              * 原型 prototype
 9              * 
10              *     我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
11              *         这个属性对应着一个对象,这个对象就是我们所谓的原型对象
12              *     如果函数作为普通函数调用prototype没有任何作用
13              *     当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,
14              *         指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
15              * 
16              *     原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,
17              *         我们可以将对象中共有的内容,统一设置到原型对象中。
18              * 
19              * 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,
20              *     如果没有则会去原型对象中寻找,如果找到则直接使用
21              * 
22              * 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
23              *     这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
24              */
25             
26             function MyClass(){
27                 
28             }
29             
30             //向MyClass的原型中添加属性a
31             MyClass.prototype.a = 123;
32             
33             //向MyClass的原型中添加一个方法
34             MyClass.prototype.sayHello = function(){
35                 alert("hello");
36             };
37             
38             var mc = new MyClass();
39             
40             var mc2 = new MyClass();
41             
42             //console.log(MyClass.prototype);
43             //console.log(mc2.__proto__ == MyClass.prototype);
44             
45             //向mc中添加a属性
46             mc.a = "我是mc中的a";
47             
48             //console.log(mc2.a);
49             
50             mc.sayHello();
51             
52             
53         </script>
54     </head>
55     <body>
56     </body>
57 </html>
 
原文地址:https://www.cnblogs.com/Renyi-Fan/p/12432410.html