原型链

作者: shadow123 | 来源:发表于2017-07-26 23:35 被阅读0次

原型

了解原型链,我们先了解下原型

  1. 所有的对象都有toString()、valueOf()、constructor、hasOwnProperty()等
  2. 所有的数组都是有对象应该有的属性
  3. 所有的数组都有push()、shift()、join()、slice()、splice()等
  4. var array = [] 应该有数组共有的所有属性
var array = []

我们用console.dir()检测下array有什么属性

我们发现 console.dir(array) 打出来的结果是:

  1. array 有一个属性叫做 __proto__(它是一个对象)
  2. array.__proto__ 有很多属性,包括 push()、shift()、join()、slice()、splice()等
  3. array.__proto__其实也有一个叫做 __proto__的属性,包括toString()、valueOf()、constructor、hasOwnProperty()等
  4. array.__proto__.__proto__ 其实也有一个叫做 __proto__的属性(console.log 没有显示),值为 null

原型链

当我们读取 array.toString 时,JS 引擎会做下面的事情:

  1. 看看 array 数组本身有没有 toString 属性。没有就走到下一步。

  2. 看看 array.__proto__有没有 toString 属性,发现 array.__proto__有 toString 属性,于是找到了

所以 array.toString 实际上就是第 2 步中找到的 array.__proto__.toString

可以想象,

  1. 如果 array.__proto__ 没有,那么浏览器会继续查看 array.__proto__.__proto__

  2. 如果 array.__proto__.__proto__ 也没有,那么浏览器会继续查看 array.__proto__.__proto__.__proto__

  3. 直到找到 toString 或者 __proto__为 null。

上面这个搜索过程,是连着由 __proto__ 组成的链子一直走的。

这个链子,就叫做原型链。

API

hasOwnProperty() 方法

hasOwnProperty() 方法会返回一个布尔值,指示对象是否具有指定的属性作为自身(不继承)属性。

var o = {
  name:'jack'
}
o.hasOwnProperty('name'); // true
o.hasOwnProperty('toString'); // false

Object.create() 方法

Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

var a ={
  name:'jack'
}
var b = {
  form:'china'
}
a = Object.create(b)

prototype

对象.__proto__ === 对象.constructor.prototype

function Person(){}
Person.prototype.name = 'jack'
var person= new Person()
console.log(person.name)  // jack
console.log(person.__proto__ === Person.prototype) // true
console.log(Person.__proto__ === Person.constructor.prototype) // true
console.log(Person.__proto__ === Function.prototype) //true
console.log(Person.prototype.constructor === Person) // true
console.log(Object.prototype.__proto__ === null) // true
console.log(Object.prototype.constructor === Object) // true
console.log(person.constructor === Person) // true
console.log(person.constructor === Person.prototype.constructor) // true

只有对象才有 __proto__,只有函数才有 prototype

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 原型链&查找规则&作用域链

    原型链(隐式原型链) 属性的查找规则(原型链的查找规则) 作用域链

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

      本文标题:原型链

      本文链接:https://www.haomeiwen.com/subject/ypjakxtx.html