js 原型链 prototype __proto__

1、说明

函数（Function）才有prototype属性，对象（除Object）拥有__proto__。

2、prototype与__proto__区别

示例：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>prototype与__proto__区别</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            var a = {};

            console.log(a.prototype); //undefined

            console.log(a.__proto__); //Object {}

            var b = function() {}

            console.log(b.prototype); //b {}

            console.log(b.__proto__); //function() {}

        </script>

    </body>

</html>

控制台输出：

js 原型链 prototype __proto__

（3）__proto__指向

js 原型链 prototype __proto__

示例：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>__proto__指向</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            /*1、字面量方式*/

            var a = {};

            console.log(a.__proto__); //Object {}

            console.log(a.__proto__ === a.constructor.prototype); //true

            /*2、构造器方式*/

            var A = function() {};

            var b = new A();

            console.log(b.__proto__); //A {}

            console.log(b.__proto__ === b.constructor.prototype); //true

            /*3、Object.create()方式*/

            var a1 = {

                a: 1

            }

            var a2 = Object.create(a1);

            console.log(a2.__proto__); //Object {a: 1}

            console.log(a2.__proto__ === a2.constructor.prototype); //false（此处即为图1中的例外情况）

        </script>

    </body>

</html>

控制台输出：

js 原型链 prototype __proto__

(4)原型链

（1）是__proto__指向的一条指针链！

（2）查找属性时，首先先查找自身属性，找不到的话，在查找原型链上的属性。但是不会查找自身的prototype属性。

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>属性查找</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            Function.prototype.age = 20;

            let b = function() {}

            b.prototype.age = 10;

            console.log(b.age)//输出20

        </script>

    </body>

</html>

js 原型链 prototype __proto__

示例：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>原型链</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            var A = function() {};

            var a = new A();

            console.log(a.__proto__); //A {}（即构造器function A 的原型对象）

            console.log(a.__proto__.__proto__); //Object {}（即构造器function Object 的原型对象）

            console.log(a.__proto__.__proto__.__proto__); //null

        </script>

    </body>

</html>

（5）prototype

prototype和length是每一个函数类型自带的两个属性，而其它非函数类型并没有，这一点之所以比较容易被忽略或误解，是因为所有类型的构造函数本身也是函数，所以它们自带了prototype属性：

示例：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>prototype</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            console.log(Object.prototype); //=> {} 

            console.log(Function.prototype); //=> [Function: Empty] 

            console.log(String.prototype); //=> [String: '']

        </script>

    </body>

</html>

除了prototype之外，Js中的所有对象（undefined、null等特殊情况除外）都有一个内置的[[Prototype]]属性，指向它“父类”的prototype，这个内置属性在ECMA标准中并没有给出明确的获取方式，但是许多Js的实现（如Node、大部分浏览器等）都提供了一个__proto__属性来指代这一[[Prototype]]，我们通过下面的例子来说明实例中的__proto__是如何指向构造函数的prototype的：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>prototype与__proto__</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            var Person = function() {};

            Person.prototype.type = 'Person';

            Person.prototype.maxAge = 100;

            var p = new Person();

            p.name = 'rainy';

            Person.prototype.constructor === Person; //=> true 

            p.__proto__ === Person.prototype; //=> true 

            console.log(p.prototype); //=> undefined

            console.log(p.maxAge); //100

            console.log(p.__proto__.maxAge); //100

            console.log(p.name); //rainy

            console.log(p.__proto__.name); //undefined

        </script>

    </body>

</html>

图示：

js 原型链 prototype __proto__

Person是一个函数类型的变量，因此自带了prototype属性，prototype指向中的Person.prototype对象。Person.prototype.constructor又指向Person本身；通过new关键字生成的Person类的实例p1，通过__proto__属性指向了Person的原型。这里的__proto__只是为了说明实例p1在内部实现的时候与父类之间存在的关联（指向父类的原型），在实际操作过程中实例可以直接通过.获取父类原型中的属性，从而实现了继承的功能。

（6）原型链

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>prototype与__proto__</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            var Obj = function() {};

            var o = new Obj();

            o.__proto__ === Obj.prototype; //=> true 

            o.__proto__.constructor === Obj; //=> true

            Obj.__proto__ === Function.prototype; //=> true 

            Obj.__proto__.constructor === Function; //=> true

            Function.__proto__ === Function.prototype; //=> true 

            Object.__proto__ === Object.prototype; //=> false 

            Object.__proto__ === Function.prototype; //=> true

            Function.__proto__.constructor === Function; //=> true 

            Function.__proto__.__proto__; //=> {} 

            Function.__proto__.__proto__ === o.__proto__.__proto__; //=> true 

            o.__proto__.__proto__.__proto__ === null; //=> true

        </script>

    </body>

</html>

（7）null与undefined

null与undefined 无原型

//报错

            console.log(Object.getPrototypeOf(undefined))

            //报错

            console.log(Object.getPrototypeOf(null))

js 原型链 prototype __proto__

从上面的例子和图解可以看出，prototype对象也有__proto__属性，向上追溯一直到null。

（8）原型链的遍历过程（一直到null）

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>原型链的遍历过程</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            let a = 1

            console.log(a.__proto__ === Number.prototype) //true

            console.log(Number.__proto__ === Function.prototype) //true

            console.log(Function.__proto__ === Function.prototype) //true

            console.log(Function.__proto__.__proto__ === Object.prototype) //true

            console.log(Function.__proto__.__proto__.__proto__)

        </script>

    </body>

</html>

（9）获取原型对象

Object.getPrototypeOf(object)

（10）原型上可遍历的属性

js 原型链 prototype __proto__

__proto__ 隐式原型 prototype显示原型

js 原型链 prototype __proto__

js 原型链 prototype proto的更多相关文章

js原型链prototype与&lowbar;&lowbar;proto&lowbar;&lowbar;以及new表达式
对象模型的细节 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
JavaScript原型链&colon;prototype与&lowbar;&lowbar;proto&lowbar;&lowbar;
title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...
JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
深入分析JS原型链以及为什么不能在原型链上使用对象
在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
JS 原型链图形详解
JS原型链这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
js 原型链和继承（转）
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
一张图看懂 JS 原型链
JS 原型链,画了张图,终于理清楚各种关系有木有写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...
简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
JS原型链与继承别再被问倒了
原文:详解JS原型链与继承摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承和实现继承 .接口继承只继承方法签名,而实 ...

随机推荐

Beta阶段第五次Scrum Meeting
情况简述 BETA阶段第二次Scrum Meeting 敏捷开发起始时间 2016/12/15 00:00 敏捷开发终止时间 2016/12/16 00:00 会议基本内容摘要平稳推进参与讨论人员 ...
iOS 应用内的系统复制粘贴菜单显示的语言非中文
在应用的 Info.plist 文件中添加以下代码: <key>CFBundleLocalizations</key> <array> <string> ...
关于lemon oa的数据库
lemonOA的数据库默认用的是hsqldb,这个数据库还是第一次听说,暂且不论. 也就说Lemon OA默认使用HSQLDB数据库,是嵌入式的数据库不需要单独安装. lemon-1.4.0\weba ...
解决SQLSERVER在还原数据时出现的&OpenCurlyDoubleQuote;FILESTREAM功能被禁用”问题
解决SQLSERVER在还原数据时出现的“FILESTREAM功能被禁用”问题今天由于测试需要,在网上下载了Adventureworks2008实例数据库的BAK文件,进行还原时出现了这样的错误“F ...
A9裸机
Tiny4412裸机程序之操作ICache 一.首先普及一下什么是Cache 基于程序访问的局限性,在主存和CPU通用寄存器之前设置了一类高速的.容量较小的存储器,把正在执行的指令地址附件的一部分指令 ...
Java RMI（远程方法调用）开发
参考 https://docs.oracle.com/javase/7/docs/platform/rmi/spec/rmi-arch2.html http://www.cnblogs.com/wxi ...
洛谷-乘积最大-NOIP2000提高组复赛
题目描述 Description 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你 ...
2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践 1.基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 下载自己不熟悉的软件时含有病毒. 网络钓鱼, ...
2019&period;02&period;19 bzoj2655&colon; calc（生成函数+拉格朗日插值）
传送门题意简述:问有多少数列满足如下条件: 所有数在[1,A][1,A][1,A]之间. 没有相同的数数列长度为nnn 一个数列的贡献是所有数之积,问所有满足条件的数列的贡献之和. A≤1e9,n ...
BCGcontrolBar(三) 添加表格(Grid)组件
表格组件和图表组件是BCG的亮点之一如下图 BCG有众多的表格样式可供选择下图是插入基本表格组件后的效果首先在程序中添加 BasicGridCtrl.h BasicGridCtrl.cpp 因为 ...

js 原型链 prototype __proto__

js 原型链 prototype __proto__的更多相关文章

随机推荐

相关文章

js 原型链 prototype proto

js 原型链 prototype proto的更多相关文章