码迷,mamicode.com
首页 > 其他好文 > 详细

关于原型、原型链和原型继承的理解

时间:2019-09-03 09:16:21      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:span   16px   http   The   AMM   作用域   ons   ram   变量   

# 个人理解
原型:
prototype首先是只作用于函数的属性,无法直接用于对象或变量。
每个函数中都自带一个__proto__属性(可以存储继承对象中的prototype属性--- p.__proto__ = Person.prototype)。
在实例化对象(构造函数)时,寻找某个属性(如demo中的name属性),在当前属性中无法找到属性,会从xxx.__proto__中进行寻找。若还未找到,会继续向xxx.__proto__.__proto__ 中进行寻找。
** 实例化(创建对象)相当于利用.call()属性修改this的作用域。 如var p = new Person() 相当于 p --> Person.call(p)
 
1 // demo1 --- 原型    
2         var Person = function () { }
3         Person.prototype = {
4             name: "zhangsan"
5         }
6         var p = new Person();
7         console.log(p);

结构如下图

技术图片
 
 
原型链:
在实例化对象(构造函数)时,寻找某个属性(如demo中的name属性),在当前属性中无法找到属性,会从xxx.__proto__中进行寻找。若还未找到,会继续向xxx.__proto__.__proto__ 中进行寻找。
利用上述原理,可通过继承方法(如demo2,Programmer函数中的prototype继承于Person中的属性),使子继承于父对象中的属性,若存在同名属性,则取子对象中的值。
原型链其实就是通过__proto__属性,以层层递推的方式,一层一层的寻找需要的属性。
 
 1         // demo2 --- 原型链
 2         var Person = function () { }
 3         Person.prototype.gongzi = 5000;
 4         Person.prototype.say = function () {
 5             console.log("天气很好")
 6         }
 7         var Programmer = function () {}
 8         Programmer.prototype = new Person()
 9         Programmer.prototype.gongzi = 15000;
10         Programmer.prototype.wcd = function () {
11             console.log("天气也很好")
12         }
13         var p = new Programmer()
14         console.log(p)

结构如下图

技术图片
 
 
原型继承:
通过原型链理论,利用 son.prototype = new Father() 等方式,可让子对象继承父对象中属性。
在查找属性时,会先从子对象中寻找需要的属性,如未找到,则会在__proto__这个隐藏属性中寻找。而我们又通过prototype继承了父对象中需要的属性,所以会在__proto__中看到继承自父对象的属性。
 1         // demo3 --- 原型链继承
 2         function Person(name, age) {
 3             this.name = name;
 4             this.age = age;
 5         }
 6         Person.prototype.sayHello = function () {
 7             console.log("名字叫 " + this.name)
 8         }
 9         function Student() {}
10         Student.prototype = new Person(‘zhangsan‘,18);//此步骤为继承 父 中的属性
11         Student.prototype.grade = 3;
12         Student.prototype.test = function(){
13             console.log(this.grade);
14         }
15         var s = new Student();
16         console.log(s);

结构如下图 

技术图片

 

 

 这就是我认为的原型链继承的根本思想。

关于原型、原型链和原型继承的理解

标签:span   16px   http   The   AMM   作用域   ons   ram   变量   

原文地址:https://www.cnblogs.com/moxiaoshang/p/11450794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!