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

# 个人理解

原型:

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);

结构如下图

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

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

时间: 2024-10-10 14:53:47

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

JavaScript原型,原型链 ? Js的继承?

什么是js原型:函数的一个属性,在函数的创建过程中由js编译器自动添加.具体来说,就是我们经常使用的,prototype属性,这个属性怎么得来的呢? 当生产一个function对象的时候,就可以看到它了. js functiion对象的创建-1 要使用function对象,必须先创建一个对象,有几种方式: 1.var A = function(){};//字面量,匿名函数,推荐 2.function A(){};//函数声明 3.var A = new Function(//这里是函数体)//实

原型继承+原型链 + 对象继承发展

一.原型继承: 1.说起原型继承,就要先由构造函数创造对象说起,首先了解构造函数内部基本原理: (1).在函数体最前面隐式的加上this = {} (2).执行 this.xxx = xxx; (3).隐式的返回this 并且要注意隐士创建的this对象中有个名为__proto__的属性,其属性值为该构造函数继承的原型prototype. 而原型对象的有一个名为constructor的属性,其属性值为继承之的构造函数, 所以可以通过这两个属性相互查看 2.原型的定义及一些特点: a.定义:原型是

对js原型链及继承的理解:__proto__&prototpye

首先我们来理解一下原型链的概念: 要理解原型链必须知道构造函数.原型和实例的关系: 每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针(即prototype),而实例则包含一个指向原型对象的内部指针(即__proto__). var father = function() { this.relation = "father"; } father.prototype.money = function() { this.money = 100000; } var father

javascript精髓篇之原型链维护和继承.

一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了.其实啊,光靠这一个属性是无法完成javascript的继承.我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料.另外一个看不见的prototype成员.每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础. 1 //构

Javascript的原型、原型链、原型链继承

原型 在javascript中,原型分有两种:显示原型(prototype)和隐式原型(__proto__). __proto__(隐式原型) JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问.ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). prototype(显式原型) 这是函数对象特有的属性.这个属性是一个指针,指向一个对象,这

[js高手之路]从原型链开始图解继承到组合继承的产生

于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 function Person(){ 2 this.userName = 'ghostwu'; 3 } 4 Person.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 function Teacher (){}

对Javascript 类、原型链、继承的理解

一.序言 ??和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承.(以下不讨论ES6中利用class.extends关键字来实现类和继承:实质上,ES6中的class.extends关键字是利用语法糖实现的) Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements). 二.类的实现 1.我对类的理解 ??首先,

明白JavaScript原型链和JavaScrip继承

原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: 1 <script type="text/javascript"> 2 function parent(){ 3 this.name="cehis"; 4 } 5 6 function son(){ 7 this.age=11; 8 } 9 10 function sub(){ 11 this.sex="nan"; 12 }

JS的作用域链与原型链

来一波,好记性不如烂笔头. 这两条链子可是很重要的. 作用域链 当执行一段JS代码(全局代码或函数)时,JS引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链.每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域.作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this.arguments.命名参数和该函数中的所有局部变量

javascript作用域链与原型链有联系吗?

一般来说,作用域链是针对变量的,js里面大的范围上来说,只有两种作用域,全局作用域和函数内部作用域,如果函数1里面又定义了函数2(一般都是匿名函数), 那么就有了这么一个作用域链全局作用域==>函数1作用域==>函数2作用域:特点是函数1里面可以直接使用全局作用域的变量,函数2里面可以直接使用全局作用域和函数1作用域的变量原型链的话,一般是定义构造函数时用到,可以认为是针对构造函数的或者说针对构造函数对应的类的:原型链的头部就是Object类/构造函数,如果有构造函数1.prototype =