JS基础知识理解之一: 原型链

js原型链

js原型链是什么?

在思考这个问题的时候,我们可能会有很多概念,【链子】、【祖先】、【father】

  1. 要理解 原型链 首先要理解 原型

    对象的属性 [[Prototype]] 都指向其他对象,Object.prototype 的 [[Prototype]] 例外。

  2. 单纯从 原型链 这个这个词来理解,js原型链更像是一种copy 或 引用。

    简单理解就是原型组成的链,js引擎会通过 __proto__ 一层层的往上链接。这条链就是原型链

  1. 下面通过代码来演示一下原型链
function People() {
}

People.prototype.sayHello = function() {
  console.log('hello, guy!');
}

var xiaoMing = new People();

console.log(xiaoMing.sayHello()) // hello, guy!
xiaoMing.__proto__ === Person.prototype;
Object.getPrototypeOf(xiaoMing) === Person.prototype;

Object.getPrototypeOf(People) // ƒ () { [native code] }
Object.getPrototypeOf(People) === Function.prototype // true;
Object.getPrototypeOf(People.prototype)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

从代码来跟踪:

  • xiaoMing 的__proto__指向 People.prototype
  • People.prototype 的 __proto__ 指向Object.Prototype
  1. 下面进入更加模糊的关系。。
Object.getPrototypeOf(Object)
// ƒ () { [native code] }

Object.getPrototypeOf(Function)
// ƒ () { [native code] }

Function.__proto__
// ƒ () { [native code] }

Object.__proto__
// ƒ () { [native code] }

Object.getPrototypeOf(Function.prototype)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

Object.getPrototypeOf(Object.prototype)
// null

Object.getPrototypeOf(100)
// Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
constructor: ƒ Number()
toExponential: ƒ toExponential()
toFixed: ƒ toFixed()
toLocaleString: ƒ toLocaleString()
toPrecision: ƒ toPrecision()
toString: ƒ toString()
valueOf: ƒ valueOf()
__proto__: Object
[[PrimitiveValue]]: 0

// 下面看几种数据类型的prototype 都是?

100 instanceof Number
// false
100 instanceof Object
// false

Object.getPrototypeOf(obj)
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
obj instanceof Object
//true

Object.getPrototypeOf('test')
//String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}anchor: ƒ anchor()big: ƒ big()blink: ƒ blink()bold: ƒ bold()charAt: ƒ charAt()charCodeAt: ƒ charCodeAt()codePointAt: ƒ codePointAt()concat: ƒ concat()constructor: ƒ String()endsWith: ƒ endsWith()fixed: ƒ fixed()fontcolor: ƒ fontcolor()fontsize: ƒ fontsize()includes: ƒ includes()indexOf: ƒ indexOf()italics: ƒ italics()lastIndexOf: ƒ lastIndexOf()length: 0link: ƒ link()localeCompare: ƒ localeCompare()match: ƒ match()matchAll: ƒ matchAll()normalize: ƒ normalize()padEnd: ƒ padEnd()padStart: ƒ padStart()repeat: ƒ repeat()replace: ƒ replace()search: ƒ search()slice: ƒ slice()small: ƒ small()split: ƒ split()startsWith: ƒ startsWith()strike: ƒ strike()sub: ƒ sub()substr: ƒ substr()substring: ƒ substring()sup: ƒ sup()toLocaleLowerCase: ƒ toLocaleLowerCase()toLocaleUpperCase: ƒ toLocaleUpperCase()toLowerCase: ƒ toLowerCase()toString: ƒ toString()toUpperCase: ƒ toUpperCase()trim: ƒ trim()trimEnd: ƒ trimEnd()trimLeft: ƒ trimStart()trimRight: ƒ trimEnd()trimStart: ƒ trimStart()valueOf: ƒ valueOf()Symbol(Symbol.iterator): ƒ [Symbol.iterator]()__proto__: Object[[PrimitiveValue]]: ""
'test' instanceof String
//false
String('test') === 'test'
//true
String('test') instanceof String
// false

  • Object 是有Function 创建的

  • Function.prototype 的 原型是 Object.Prototype

  • Function.prototype 是 Function。

  • 函数是有它自己创建的,难道是为了保持一致??

下面这张图,展示更加错综复杂的原型链。

是不是很迷惑。

Object 是有Function 创建的,这个正好符合写普通fuction的写法,function Object() {}

只不过这次函数名是 Object而已。

看下面如果我们把Object 重写了。这样只要通过Object 构造函数创建的原型都已经被改写

function Object() {}
// undefined

var a = new Object();
// undefined

a.__proto__
// {constructor: ƒ}

var c = new Object({})
c.__proto__
// {constructor: ƒ}

var d = new Object({name: 'dd'})
d.__proto__
// {constructor: ƒ}

Object.__proto__
// ƒ () { [native code] }

最后又回到了 Function

js 就是函数式编程,一切皆函数,哈哈。

(0)

相关推荐

  • JavaScript中的原型prototype和

    问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Pers ...

  • js原型原型链

    一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象. o1 o2 o3 为普通对象, ...

  • 什么是原型链

    对象原型 相信大家都这样用过 map : let arr = [0, 1, 2]let doubleArr = arr.map(c => c * 2)console.log(doubleArr) ...

  • 干货 | 快速读懂 JS 原型链

    OSC开源社区 昨天 以下文章来源于前端日志 ,作者前端日志 前端日志前端一二线大厂日常工作.技术分享.实战总结. 最近参加了公司内部技术分享,分享同学提到了 Js 原型链的问题,并从 V8 的视角展 ...

  • JS的原型和继承

    __proto__ 除null和undefined,JS中的所有数据类型都有这个属性: 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以 ...

  • DOE实验设计必备基础知识理解

    课程目录: 1.DOE的发展及基本类型 2.DOE中的术语或惯用语理解 3.实施DOE基本原则.流程 实验设计(Design of Experiments DOE ) 实验设计是一种安排实验和分析实验 ...

  • [js] 第108天 请描述下js的原型和原型链的理解以及它们之间的关系

    今日试题: 请描述下js的原型和原型链的理解以及它们之间的关系 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自 ...

  • 人体素描练习参考,这些人体基础知识你都理解了吗?

    人体素描练习参考,这些人体基础知识你都理解了吗? 喜欢我们的分享 觉得我们分享有用的话 请帮我们推荐给喜欢画画的人~

  • 小学语文 | 1-6年级基础知识 阅读理解每日一练,提升必备!

    小学语文 | 1-6年级基础知识 阅读理解每日一练,提升必备!

  • 基础知识巩固:拼音 汉字 词语 语句 标点符号 阅读理解 写作

    拼音 1.基础知识回顾:23个声母.24个韵母.16个整体认读音节. 2.声调:分为四声.标调歌:"有a不放过,无a找o.e,i.u并列标在后" 3.音节:音节是声母.韵母和声调的 ...

  • 想画好油画,必先理解以下基础知识

    百画苑油画院2021-02-23 17:01:00 绘画的核心基础有哪些,你都理解了吗? 光与影: 光影是油画最重要的基础知识之一.可以将其称为明度的变化. 明度比颜色更重要.如果画面颜色很美,但是画 ...

  • CPU基础知识:通俗易懂方式理解主频、核心、线程、缓存、架构

    我们通常会将CPU比喻为人类的大脑,是计算机的核心硬件,决定了一台电脑的运算性能好坏.我们在选购CPU的时候,通常都会在网上查询处理器型号参数,主要是看主频.核心.线程.缓存.架构等参数,那么对于小白 ...

  • 美术基础知识:透视和结构的理解与运用

    上次文章我们分析了绘画的观察方法,详见 观察方法  --美术绘画学习的必备基础  透视是在二维平面上塑造多维空间的重要手段,掌握透视规律,才能在画面上体现出物体的体积.空间和距离感. 人们通常说的近大 ...

  • 想画好油画,必先理解以下基础知识!

    绘画的核心基础有哪些,你都理解了吗? 光与影: 光影是油画最重要的基础知识之一.可以将其称为明度的变化. 明度比颜色更重要.如果画面颜色很美,但是画面明度不正确,那么画面无修改. 然而,如果画面也搭配 ...