JavaScript原型链详解


Posted in Javascript onNovember 07, 2021

1、构造函数和实例

假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例。

function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

现在你可以很清晰的明白Foo()是构造函数,f1是它的实例。

2、属性Prototype

Foo()这个构造函数是一个方法。

方法也是对象数据类型,所以可以说方法是个对象。

对象就有属性,不过方法有自己特殊的一个属性,叫做prototype,其他对象没有哦。

这个属性会指向一个原型对象(Foo.prototype),而原型对象也会有一个自己的属性叫做constructor,指向属性包含了一个指针,指回原构造函数。

 

function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

    console.log(Foo.prototype);//Foo的原型对象
    console.log(f1.prototype);//f1没有 underfied

JavaScript原型链详解

3、属性__proto__

上文的prototype是给构造函数的所有实例提供共享方法和属性的。

实例又是怎么访问到共享方法和属性的呢?

f1实例没有prototype,而有一个属性__proto__,这是所有对象都有的属性,它指向到构造自己的构造函数的原型对象,然后js这个语言就是根据这个属性来让实例访问到共享属性和方法的

Foo是f1的构造函数,Foo.prototypeFoo的原型对象,所以f1.__proto__指向Foo.prototype

function Foo() {
      console.log("我是一个构造方法");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);

JavaScript原型链详解

4、访问原型上的方法

Foo这个构造函数如果希望自己的实例能够拥有同一个属性,比如name,就在自己的原型对象上加上。

 

function Foo() {
      console.log("我是一个方法");
    }

    Foo.prototype.name = "我是Foo创造的实例共享的属性";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//我是Foo创造的实例共享的属性
    console.log(f2.name);//我是Foo创造的实例共享的属性

JavaScript原型链详解

5、构造函数也有__proto__

上面说所有对象都有__proto__ ,Foo是函数也是对象啊,所以Foo.__proto__是啥呢?

那就去找Foo的构造函数是谁呢,Foo是一个函数,拥有函数特有的方法和属性,创造的它的构造函数就是Function,这个js自带的的一个构造函数,它的Function.prototype给所有js中你创建的函数提供函数自带的一些公共方法和属性。

所以Foo.__proto__指向Funtion.prototype

6、构造函数的原型也有__proto__

Foo.prototype也是对象,所以它也有__proto__。

每当我们要找__proto__,就得找它的构造函数,Foo.prototype是个对象,纯对象,所以它的构造函数是Object,那么Object的原型就是Object.prototype。

Foo.prototype.__proto__指向Object.prototype

7、Object.prototype这个原型对象很特殊

ArrayStringFuntionObject这些构造函数都是函数,
都是Funtion构造函数的实例,
Array.__proto__String.__proto__Funtion.__proto__ Object.__proto__指向Funtion.prototype原型,
可以调用Funtion.prototype原型的一些公共方法,
例如都可以调用.name查看自己的函数名字。

Array.prototypeString.prototypeFuntion.prototype这些原型对象都是对象,
都是Object构造函数的实例,
Array.prototype.__proto__ String.prototype.__proto__Funtion.prototype.__proto__指向Object.prototype原型,
所以可以调用Object.prototype这个原型对象的公共方法,

Object.prototype有些特殊,它虽然是对象,但是并不是Object自己的实例,
Object.prototype.__proto__指向null,作为原型链的终点

8、总结

方法,也就是函数,才有prototype,就是方法的原型。
所以实例,一般都会有个对应的构造方法,也就是构造函数,实例的__proto__指向构造方法的原型。
js有很多自带的构造方法,例如ArrayStringFuntionObject,都是根据js一些对象类型分配的,他们的原型上提供了许多封装好的常用方法。
所有构造方法本身是函数,是Funtion这个js自带构造函数的实例。
除了Object.prototype,所有构造方法的原型本身是对象,是Object这个js自带构造函数的实例。
Object.prototype.__prototype指向null,作为原型链终点。

JavaScript原型链详解

到此这篇关于JavaScript原型链详解的文章就介绍到这了,更多相关JavaScript原型链内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
WebWorker 封装 JavaScript 沙箱详情
You might like
mysql 字段类型说明
2007/04/27 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python删除过期log文件操作实例解析
2018/01/31 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
英国名牌男装店:Standout
2021/02/17 全球购物
安踏广告词改编版
2014/03/21 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
先进党组织事迹材料
2014/12/26 职场文书
高一数学教学反思
2016/02/18 职场文书
php png失真的原因及解决办法
2021/11/17 PHP