原型与原型链

denson 发布于2019-08-22 18:34 / 395人阅读

摘要：全局对象规定全局对象叫做，但是浏览器把作为全局对象浏览器先存在的。就是一个哈希表，里面含有很多属性。对象表示一个包含文档的窗口，其属性指向窗口中载入的文档。使用属性可以获取指定文档所在窗口。在标签浏览器比如中，每个标签具有自己的对象。

全局对象

ECMAScript规定全局对象叫做global，但是浏览器把window作为全局对象（浏览器先存在的）。
window就是一个哈希表，里面含有很多属性。
window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档。使用 document.defaultView 属性可以获取指定文档所在窗口。
在标签浏览器（比如Firefox）中，每个标签具有自己的 window 对象。也就是说，同一个窗口的标签之间不会共享一个 window 对象。
无代码时，创建一个新页面window就会被创建。
window的属性就是全局变量。
这些全局变量分为两种：

1、一种是 ECMAScript 规定的

例如：

parseInt

parseFloat

Number

String

Boolean

Object

2、一种是浏览器自己加的属性

例如：

alert

prompt

comfirm

console.log

console.dir

document

document.createElement

document.getElementById

简单类型和对象的区别 1、创建一个number

var n = 1
var n = new Number(1)

这两个都是创建一个Number类型的数据，但是区别在于，第二个创建的是声明一个对象，因为js创建初期要求和java相像，所以才有了这种数据创建方式,虽然用第一种创建的是一个简单数据类型，但是却可以拥有toString，valueOf等函数，这是因为临时转换成一个temp临时对象，而这个对象中包含了那些函数

2、创建一个string

var s = "string"
var s = new String("string")

创建string也有两种方法，第二种方法和第一种的区别就是，第二种创建的也是一个对象，具体和number是一样的

3、创建一个boolean

var b = true
var b = new Boolean(ture)

创建布尔类型也有两种方法，第二种创建的是一个对象，和number和string一样，但是布尔使用第二种创建方法有个问题就是，因为第二种创建的是一个对象，所以如果直接用来判断无论是真假都会变成真，就像这样

var b = new Boolean(false)

b == Boolean {false}
!!b == true

因为所有对象转换为布尔值都为真

4、创建一个object

var o = {}
var o = new Object()

对于创建对象来说，两种创建方法得出的对象完全一样

公用属性（原型） 原型

所有对象上都有toString，valueOf这两个函数，但是如果创建一个对象就创建一次这种共有的函数，那是非常占内存的。
所以就将这些对象共有的函数给取出来重新生成一个对象并存在一个地址，这样每创建一个对象将共有函数的地址存进去就可以使每个对象调用其公用属性了，不用浪费去声明重复意义的函数
在对象中存在一个隐藏属性__proto__来储存公用属性的地址，当要调用toString时，首先看对象属性里存不存这个函数，如果不存在就会进入公用属性里面去找，然后调用

//控制台打印
var o1 = {}
undefined
var o2 = new Object()
undefined
o1 === o2
false
o1.toString === o2.toString
true

由此可以看出，不同对象里的公用函数是一样的，这个公用属性就是原型
通过原型这种机制，JavaScript 中的对象从其他对象继承功能特性；这种继承机制与经典的面向对象编程语言的继承机制不同。

原型链

不仅只有object有公用属性，Number、String、Boolean都有各自的共有属性，如果创建一个number类型，其中toFixed函数并没有存在于Obj的公用属性里面，那么它要存在哪里
这就是因为Number也存在自己的公用属性，当使用Number创建一个对象的时候，对象中存在隐藏属性__proto__储存着Number公用属性的地址，而Number的公用属性中也存在着一个隐藏属性__proto__，这个隐藏属性存着的地址是Object的公用属性的地址

var n = new Number(1)
var o1 = new Object()
n.__proto__.__proto__ === o1.__proto__
true

不仅是Number类型是这样，String和Boolean类型中也存在各自的公用属性，而像上面描述的那样，Number对象存在隐藏属性指向Number的公用属性，Number公用属性中存在隐藏属性指向Object的公用属性，像这样像一条链子一样将它们的公用属性串连起来的东西就叫做原型链

__proto__和prototype

我们都知道浏览器有垃圾回收机制，但是当我打开一个页面什么都没有创建时，公用属性作为一个哈希表，如果没有被引用，那么它就将会被回收，而是什么引用的它们呢

Object.prototype

这个就是object的公用属性，也就是原型

var o1 = {}
o1.__proto__ === Object.prototype
true

Number对象也是一样的

var n1 = new Number(1)
n1.__proto__ === Number.prototype
true

由此我们可以推出n1的公用属性的公用属性就是

n1.__proto__.__proto__ === Object.prototype
true

String和Boolean也是和Number一样

var s1 = new String("1")
var b1 = new Boolean(true)

b1.__proto__ === Boolean.prototype
true
s1.__proto__ === String.prototype
true
b1.__proto__.__proto__ === Object.prototype
true
s1.__proto__.__proto__ === Object.prototype
true

声明一个变量，就是一、将哈希整理好，二、__proto__指向公用属性
prototype和__proto__都是对公用属性的引用，区别在于，prototype是防止公用属性被垃圾回收清理，而__proto__是对公用属性的使用
总结来说就是

var 对象 = new 函数()
对象.__proto__ === 函数.prototype//因为 Function 是 Object 的构造函数。

__proto__是对象的属性，prototype是函数的属性
虽然String.prototype的隐藏属性指向

String.prototype.__proto__ === Object.prototype
true

但是Object.prototype的隐藏属性指向null

Object.prototype.__proto__ === null
true

GPU云服务器云服务器原型原型链原型链原型链继承原型链图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96009.html

《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
【5】JavaScript 函数高级——原型与原型链深入理解（图解）

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解原型与原型链深入理解（图解）原型（prototype）函数的 prototype 属性（图）每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）原型对象中有...

马龙驹 2019-08-23 17:17 评论0 收藏0
JavaScript中的原型与原型链

摘要：前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？国际惯例，让我们先抛出问题：什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧如果文章中有出现纰...

laoLiueizo 2019-08-23 16:58 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0
原型链一：原型与原型链

摘要：说白了，原型就是构造函数用来构造新实例的模板对象。什么是原型链先回答什么是原型。例如这个原型的原型就是这个构造函数的，既这个原型对象。这些原型对象通过像链子一样连起来，就叫做原型链。原型链初步学习这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业的关于原型链的解释请看JavaScript深入之从原型到原型链和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 评论0 收藏0
JavaScript系列--浅析原型链与继承

摘要：综上所述有原型链继承，构造函数继承经典继承，组合继承，寄生继承，寄生组合继承五种方法，寄生组合式继承，集寄生式继承和组合继承的优点于一身是实现基于类型继承的最有效方法。一、前言继承是面向对象（OOP）语言中的一个最为人津津乐道的概念。许多面对对象（OOP）语言都支持两种继承方式:：接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名...

draveness 2019-08-23 18:06 评论0 收藏0