当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS基础知识理解之一： 原型链

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

2020年04月30日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网