明白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         }
13
14         //简单实现下继承
15          son.prototype=new parent();
16          sub.prototype=new son();
17
18         var sunfromsub=new sub();
19         var sonformson=new son();
20         console.log(sunfromsub.name,sunfromsub.age,sunfromsub.sex);  //cehis 11 nan
21         console.log(sonformson.name,sonformson.age,sonformson.sex);  //cehis 11 undefined
22
23         //看一下__proto__这个属性
24         console.log(sunfromsub.__proto__);
25         console.log(sunfromsub.__proto__.__proto__);
26         console.log(sunfromsub.__proto__.__proto__.__proto__);
27         console.log(sunfromsub.__proto__.__proto__.__proto__.__proto__);
28         console.log(sunfromsub.__proto__.__proto__.__proto__.__proto__.__proto__);//null
29
30         console.log(sonformson.__proto__);
31         console.log(sonformson.__proto__.__proto__);
32         console.log(sonformson.__proto__.__proto__.__proto__);
33         console.log(sonformson.__proto__.__proto__.__proto__.__proto__);//null
34     </script>

总结一下知识点:

prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性

简单来说通过级联访问__proto__这个属性,就往js内部原型追溯。一直到null为止。

JavaScript原型链就是__proto__形成的链条。是一种静态的结构。

而JavaScript的继承是JavaScript内部的一种访问机制。这种机制就是回溯__proto__形成的链条。

结果:构造函数的实例可以继承构造函数自身的和原型上属性值。一直继承到null为止。

需要指出的是,JavaScript继承的方式有不止一种,上述代码中,构造函数实例既继承了构造函数的原型数据也继承了构造函数数据。

如果使用下面的代码实现继承:

 1       function parent(){
 2             this.name="cehis";
 3         }
 4         function son(){
 5             this.age=11;
 6         }
 7
 8         son.prototype=new parent();
 9            son.prototype.id=111;
10         //只是继承构造函数原型上属性也就是继承id
11         var audience1=Object.create(son.prototype);
12         //既不会继承构造函数自身属性也不会继承构造函数原型属性
13         var audience2=Object.create(son);
14
15          console.log(audience1.id,audience1.age,audience1.name); //111 undefined "cehis"
16          console.log(audience2.id,audience2.age,audience2.name); //undefined undefined "son"

使用Object.create创建实例,实现继承,如果参数是构造函数本身则会继承构造函数的属性,但是不会继承其父元素的原型对象的属性。

如果参数是原型prototype则会继承父元素属性以及构造函数原型属性。

如果使用apply或者call方式实现继承。

 1  function parent(name,age) {
 2         this.name =name;
 3         this.age=age;
 4     }
 5     parent.prototype.id=222;
 6     function son(name,age,sex) {
 7         parent.call(this,name,age);
 8         this.sex =sex;
 9     }
10
11
12     var example=new son("jack",12,"nan");
13     console.log(example.name,example.age,example.sex,example.id);//jack 12 nan undefined

以上只是继承了构造函数自身的属性,而没有继承构造函数原型的属性。apply或者call本身是借用,而不是继承。

严格来说只有new 和 Object.create()才是继承。才会回溯。

本文结束。

原文地址:https://www.cnblogs.com/zhensg123/p/9359960.html

时间: 2024-10-13 19:55:04

明白JavaScript原型链和JavaScrip继承的相关文章

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

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

深入理解JavaScript原型链

前言 最近碰到一个题,大家可以试下. Object.prototype.a = function() { console.log("aaa "+this.name); }; Function.prototype.b = function() { console.log("bbb "+this.name); }; function Person(name) { this.name = name; } var person = new Person("Chin

[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学习总结(十七)——Javascript原型链的原理

一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend方法 1 /*扩展Object类,添加Clone,JS实现克隆的方法*/ 2 Ob

Javascript 原型链资料收集

Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-prototype.html 继承与原型链 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain 最详尽的 JS 原型与原型链终极详解,没有「可能是」. https://www.j

web前端安全-JavaScript 原型链污染

0x01 前言 最近看到一篇原型链污染的文章,自己在这里总结一下 0x02 javascript 原型链 js在ECS6之前没有类的概念,之前的类都是用funtion来声明的.如下 可以看到b在实例化为test对象以后,就可以输出test类中的属性a了.这是为什么呢? 原因在于js中的一个重要的概念:继承. 而继承的整个过程就称为该类的原型链. 在javascript中,每个对象的都有一个指向他的原型(prototype)的内部链接,这个原型对象又有它自己的原型,直到null为止 functio

轻松搞定javascript原型链 _proto_

//如有错误或不同观点,欢迎批评与讨论!首先,prototype出现的目的,是为了解决 代码重用 的问题 , prototype 相当于是在内存上划分出一个公共的区域, 专用于存放 实例化对象 的相同方法或属性, 一份代码,人人可用:为方便理解,我们可以先把prototype 当作是CSS中的 class,在prototype上加方法和属性,那么其它对象就会拥有这些方法和属性, 但这些代码紧有一份!<script>function Person(){this.name = '张三'; this

javascript原型链继承

一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constructor属性:每个原型对象都有一个constructor属性,这个constructor属性包含一个指向prototype属性所在函数的指针. 例如 Foo.prototype.constructor指向Foo函数.这个属性是只读的. __proto__属性(ES6通过对__proto__属性进行标

老生常谈之JavaScript原型链继承

介绍 本文总结了ES3,ES5,ES7和NS(NonStandard)四种原型链继承的实现方法. 前言 ECMAScript 6 class将给开发者带来JavaScript OOP的规范实现,但这种方式的直接应用和普及至少得等到IE11被淘汰掉,而到那时,说不定我们已转向边沿领域了. 随着Web的快速发展,新的方法可能会随时取代旧的方法,而我们在lifetime中用过的方法,代表着一代人的记忆,又怎能忘怀? 分享 另附上BDD测试 这其中: 较新的JavaScript运行环境能兼容旧的继承方法