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 相关文章推荐
div模拟滚动条效果示例代码
Oct 16 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
WebWorker 封装 JavaScript 沙箱详情
You might like
php 无限分类的树类代码
2009/12/03 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python实现自动签到脚本功能
2020/08/20 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
白血病捐款倡议书
2014/05/14 职场文书
行政求职信
2014/07/04 职场文书
公安学专业求职信
2014/07/27 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
小数乘法教学反思
2016/02/22 职场文书
Flask response响应的具体使用
2021/07/15 Python
Golang 切片(Slice)实现增删改查
2022/04/22 Golang