js原型和原型链以及原型继承

在js中，每一个对象创建的时候，都会产生一个原型对象，创建出来的对象会从原型对象中继承一些公共的属性和方法。

1，每一个构造函数都有一个prototype属性，这个属性指向构造函数的原型对象。

2,每个由构造函数new创建出的实例对象（除了null）都会有__proto__属性，这个属性可以让实例的对象指向该对象的原型对象。3，每个原型对象都有一个constructor属性，可以指向该原型函数所关联的构造函数。

原型链：当读取构造函数new的实例的属性/方法时，如果找不到，就会自动的去查找该对象关联的原型对象的属性/方法，如果还查找不到，就一直向上查找，找原型对象的原型对象，一直找到最顶层为止。

如上图中，蓝色的线条即为原型链。

原型链继承:了解什么是原型链之后，我们需要知道，原型链是为了实现什么呢，我们接下来就来了解继承，在js中，继承可以通过原型链来实现，原理就是通过修改子构造函数的原型对象，让他去指向父级构造函数new的实例，示例如下（代码仅供参考）：

    //父  构造函数function Father(name,age,sex){this.name=name;this.age=age;this.sex=sex;}Father.prototype.money=function(){console.log(this.name+"-----在挣钱");}//子  构造函数function Son(name,age,sex,school){//使用call()立即调用父类方法，并传递参数【继承父类属性】Father.call(this,name,age,sex);//子类  自身属性this.school=school;}//直接将父构造函数的原型对象赋给子构造函数的原型对象// Son.prototype=Father.prototype;//将父 new 构造函数的实例对象赋值给 子 构造函数的原型对象Son.prototype=new Father();//利用constructor 手动改变Son的原型对象的指向的构造函数Son.prototype.constructor=Son;Son.prototype.game=function(){console.log(this.name+"-----在玩游戏");}let f=new Father("a",45,"女");let s=new Son("b",17,"男","清华大学");console.log(f,s);f.money();s.money();s.game();

由上图的代码我们可以看出，我们可以通过constructor属性来修改子构造函数的原型对象，但是我们不能直接把Son的原型对象指向Father的构造函数，这样会造成，两个构造方法共享了所有的方法，而我们要实现的是让Son可以访问Father的方法和属性，而Father是无法使用Son的方法和属性的，所以我们需要一个新的Father构造函数new实例对象来赋值给Son构造函数的原型对象，然后利用constructor属性来手动改变Son的原型对象指向的构造函数，现在我们就成功完成了一个原型链继承，我们可以通过Son的实例对象去调用Son和Father的所有属性和方法，但是Father的实例对象只能调用自身的属性和方法。

js原型和原型链以及原型继承相关推荐

[js高手之路]从原型链开始图解继承到组合继承的产生
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 ...
JS 面向对象编程、原型链、原型继承（个人学习总结）
一.面向对象 1. 面向对象是所有语言都有的一种编程思想,组织代码的一种形式基于对象的语言:JS语言面向对象的语言:c++ java c# 2. 面向对象 3大特征封装:将重用代码封装到函数 ...
js中原型，原型链，原型链继承的个人理解
一.什么是原型? 每一个javascript对象在创建的时候就会有一个与之关联的对象B产生,对象B就是所说的"原型". 1)原型也是一个对象,其他对象可以通过原型实现属性继承, 2 ...
从零开始学 Web 之 JS 高级（二）原型链，原型的继承
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
你是否理解js的Object与Function与原型链
js中,Function的本质是什么? Object的本质又是什么? js中有几条原型链? javascript的语言基于原型链,而实际上js的有两条原型链.开发者主要用到的是图中的红色原型链,如给A ...
浅谈原型链及原型链继承
1.什么是原型链? JavaScript对象有一个指向一个原型对象的链.当试图访问一个对象的属性是,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个 ...
原型、原型链、原型链继承理解
原型概念: 所有对象都有一个私有的 _proto_ 属性,而这个属性所对应的就是自身的原型: 原型链概念: 所有对像都有一个私有的 _proto_ 属性,而这个属性所指向的就是原型对象, ...
js 四句话搞懂原型和原型链
一.概念当试图查找实例对象的某个属性时,不仅仅会在实例类上查找,还会在这个类的父亲爷爷祖爷爷,层层向上,直到查找到第一个名称相同的属性或者到达一个空的原型,这个就是javascript的原型链机制. ...
ES6 （二十二）Class 的继承、extends关键字、super 关键字（函数调用（constructor）、对象（父类原型对象））、原型对象(原型链)、Mixin 模式
ES6 (二十二)Class 的继承.extends关键字.super 关键字(函数调用(constructor).对象(父类原型对象)).原型对象(原型链).Mixin 模式文章目录 ES6 (二 ...

js原型和原型链以及原型继承

js原型和原型链以及原型继承相关推荐

最新文章

热门文章