欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-26 19:44:47
js原型链 js原型链是什么? 在思考这个问题的时候,我们可能会有很多概念,【链子】、【祖先】、【father】 1. 要理解 首先要理解 对象的属性 都指向其他对象,Object.prototype 的 例外。 2. 单纯从 链 这个这个词来理解,js原型链更像是一种copy 或 引用。 简单理解 ......

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。

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

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

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

是不是很迷惑。

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 就是函数式编程,一切皆函数,哈哈。