原型与原型链

作者: CH563 | 来源:发表于2017-05-29 21:59 被阅读18次

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

怎么区分?其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。Function Object 也都是通过 New Function()创建的。

构造函数

构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

按照国际惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

要创建Person的新实例,必须使用new操作符。一般是经历以下四个步骤:

  • 1、创建一个新对象;
  • 2、将构造函数的作用域赋给新对象(此this的指向了这个新对象)
  • 3、为这新对象添加构造函数的属性
  • 4、返回新对象

上面例子中,person 就用有一个constructor (构造函数)属性,该属性是指向Person。

原型对象

无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。普通对象没有 prototype,但有 __proto__ 属性。

如上面例子,Person.prototype 指向了原型象,而 Person.prototype.constructor 又指回了Person。

而 person 只是一个对象实例。

而person可以访问保存在原型中的值,但却不能重写原型中的值。如果我们在 person 中添加一个属性,而该属性与实例原型中的一个属性同名,那个person中的属性会暂时屏蔽原型中的属性,删除后,还是读回原型中的属性

function Person() {

}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty

解析器的操作是:

  • “实例person有name属性吗?”
  • “有” —— 于是就读取实例中的name属性,输出 Kevin

删除后,再运行时:

  • “实例person有name属性吗?”
  • “没有”
  • “person的原型有name属性吗?”
  • “有” —— 于是就讯取原型中的name的属性,输出 Perty

原型链

在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做 __proto__ 的内置属性,用于指向创建它的函数对象的原型对象 prototype。以上面的例子为例:

console.log(person.__proto__ === Person.prototype)  // true

同样的,Person.prototype 也同样有 proto 属性,它指向创建它的函数对象(Object)的prototype

console.log(Person.prototype === Object.prototype) // true

继续,Object.prototype对象也有proto属性,但它比较特殊,为null

console.log(Object.prototype.__proto__) // null

我们把这个有 __proto__ 串起来的直到 Object.prototype.__proto__ 为null的链叫做原型链。

person.__proto__ ==> Person.prototype.__proto__ ==> Object.prototype.__proto__ ==> null

相关文章

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

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

  • 2019-01-28

    原型与原型链

  • 廖雪峰JS小记

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

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JavaScript 面向对象第一篇

    1.原型链 ---- (实例对象与原型之间的连接 叫做原型链) 2. hasOwnproperty ----(看是...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 原型链&instanceof关键字

    1.原型链&instanceof关键字 简单说明 原型链 与 instanceof 作用原理 1.原型链 1...

  • 原型、原型链

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

网友评论

    本文标题:原型与原型链

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