美文网首页
原型与原型链

原型与原型链

作者: zooeydotmango | 来源:发表于2019-09-25 01:40 被阅读0次

一、构造函数

JS中创建对象的方式有三种:对象字面量、new、ES5的Object.create()。但本质上只有一种方式,也就是new。

当我们使用new来创建实例时,实际上经过了以下几步:

  1. 创建一个新对象
  2. 新对象的__proto__属性指向构造函数的原型对象
  3. this指向新对象
  4. 执行构造函数的代码
  5. 返回新对象

二、原型

原型分显式原型和隐式原型

显式原型
每个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象

note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有prototype属性

隐式原型
js中任意对象都有一个内置属性[[prototype]],大多数浏览器支持通过__proto__来访问。ES5中对于这个内置属性有了标准的get方法Object.getPrototypeOf().

note:Objectprototype这个对象是个例外,它的__proto__值为null

实例对象的__proto__指向constructor(构造函数)的prototype,从而实现继承
prototype对象相当于特定类型所有实例对象都可以访问的公共容器

原型对象
function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person('Byron', 20);

var p2 = new Person('Casper', 25);

p1.sayName()  // Byron

p2.sayName()  // Casper

p1.__proto__ === Person.prototype       //true

p2.__proto__ === Person.prototype   //true

p1.__proto__ === p2.__proto__           //true

Person.prototype.constructor === Person  //true

三、原型链

当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

查找valueOf大致流程

当前实例对象obj,查找obj的属性或方法,找到后返回
没有找到,通过obj. __proto__,找到obj构造函数的prototype并且查找上面的属性和方法,找到后返回
没有找到,把Array.prototype当做obj,重复以上步骤

当然不会一直找下去,原型链是有终点的,最后查找到Object.prototype时
Object.prototype.__proto__ === null,意味着查找结束

原型链

我们来看看上图的关系

arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true

// 原型链的终点
Object.prototype.__proto__ === null
true

原型链如下:

arr ---> Array.prototype ---> Object.prototype ---> null

这就是传说中的原型链,层层向上查找,最后还没有就返回undefined

四、JS中的继承

继承是指一个对象直接使用另外一个对象的属性和方法

属性如何继承?

我们先创建一个Person类

function Person (name, age) {
    this.name = name
    this.age = age
}

// 方法定义在构造函数的原型上
Person.prototype.getName = function () { console.log(this.name)}

此时我想创建一个Teacher类,我希望它可以继承Person所有的属性,并且额外添加属于自己特定的属性;

一个新的属性,subject——这个属性包含了教师教授的学科。

定义Teacher的构造函数

function Teacher (name, age, subject) {
    Person.call(this, name, age)
    this.subject = subject
}

属性的继承是通过在一个类内执行另外一个类的构造函数,通过call指定this为当前执行环境,这样就可以得到另外一个类的所有属性。

Person.call(this, name, age)

相关文章

  • 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/lrztuctx.html