资讯专栏INFORMATION COLUMN

构造对象,原型和原型链笔记

lijinke666 / 2561人阅读

摘要:首先数组会找自己的方法没有找到,就会沿着属性继续到构造函数的里找方法如果还是没有找到,再继续往的即找方法,最后找到方法。而这构成的链就是原型链。

面向对象:面向对象、原型
对原型、原型链、 Function、Object 的理解
什么是 JS 原型链?
转载以上文章

一、OOP(Object-oriented programming, 面向对象编程) 1、wiki的解释

面向对象编程(OOP)是一种基于“对象”概念的编程范式。该对象包含数据(属性),以及一些执行过程的代码(即方法)。对象的一个特性是,调用对象的方法过程可以访问并经常修改与其关联的对象的数据字段(对象具有“this”或“self”的概念)。

2、面向对象的思路:

把某个功能看成一个整体(对象),通过调用对象的某个方法来启动功能。在用的时候不去考虑这个对象内部的实现细节,在去实现这个对象细节的时候不用管谁在调用

3、例子
面向对象的写法

Car.拧钥匙()
Car.挂挡()
Car.踩油门()
二、构造对象 1、代码

通过new 函数名("参数,参数")得到一个对象,就相当于这个对象就是这个函数构造出来的,这个对象是函数的实例

function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}
var p = new Person("hunger")
2、instanceof

instanceof是一个操作符,可以判断对象是否为某个函数的实例

p1 instanceof Person; // true
p1 instanceof Object;// true

instanceof判断的是对象,非对象的数据不能判断

1 instanceof Number; // false
3、构造函数的过程

创建一个空对象 {},假设名字是 tmpObj,并空对象的__proto__特性指向函数的prototype属性

执行 Person 函数,执行过程中对 this 操作就是对 tmpObj 进行操作

函数执行完后返回刚刚创建的 tmpObj

把 tmpObj 赋值给 p (p也指向同一个对象)

4、构造函数的原型链

1、对函数使用new表达式就是构造函数

2、每个函数都有名称为prototype属性,叫做原型,是一个对象

3、每个对象都有一个内部属性 _proto_(规范中没有指定这个名称,但是浏览器都这么实现的) 指向其类型的prototype属性,类的实例也是对象,其__proto__属性指向“类”的prototype

4、所有实例(对象)都会通过原型链引用到类型(函数)的prototype(原型),prototype相当于特定类型所有实例都可以访问到的一个公共容器,一般用来共同调用的函数


总结:

我们通过函数定义了类Person,类(函数)自动获得属性prototype
每个类的实例都会有一个内部属性__proto__,指向类的prototype属性

5、举个栗子

默认情况下,们写构造函数是不需要return的,构造函数自动将this代表的对象返回出来!
但如果我们写了return语句,如果return是基本类型,会被认为写错了无效。obj1和2还是this代表的对象。如果return是对象,那构造的对象就等于return后面的对象。

//obj1={a:1,b:2} obj2={a:1,b:2}

三、原型和原型链 1、查找数组valueof方法,讲原型链

所有数组都是由Array这个函数构建的。数组的所有方法都是Array.prototype或者他们的原型链上面的。当我们直接赋值的方式生成一个数组的时候,就相当于直接用new Array的方法构建一个对象

Array函数也是由object函数构建的Array instanceof Object===true

数组可以调用valueof这个方法,但valueof这个方法不在Array.protototype内而是在object.prototype内。
首先 a数组 会找自己的 valueof方法;没有找到,就会沿着__proto__ 属性继续到构造函数 Array 的 prototype 里找 valueof 方法;如果还是没有找到,再继续往 Array.prototype 的 proto 即 Object.prototype 找 valueof 方法,最后找到 valueof 方法。

总结:一个对象调用其方法,先在自己的自由属性内去找,找不到就去原型上去找,如果原型内也找不到,就到原型的原型上去找,直到找到该方法。而这构成的链就是原型链。如下图

2、关于原型链的规律总结

当 new 一个函数的时候会创建一个对象,『函数.prototype』 等于 『被创建对象.__proto__』

一切函数都是由 Function 这个函数创建的,所以『Function.prototype === 被创建的函数.__proto__』

一切函数的原型对象都是由 Object 这个函数创建的,所以『Object.prototype ===
一切函数.prototype.__proto__』

建议阅读若愚老师这边文章里面的例子,巩固印象对原型、原型链、 Function、Object 的理解

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100731.html

相关文章

  • 《javascript高级程序设计》笔记原型图解

    摘要:不理解没关系,下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链 文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系(重点) function Person() {}; var p = new Person(); showImg(https://s...

    vspiders 评论0 收藏0
  • JavaScript学习第十天笔记(继承)

    摘要:继承原型链如果构造函数或对象的原型指向构造函数或对象,的原型再指向构造函数或对象,以此类推,最终的构造函数或对象的原型指向的原型。 继承 原型链 如果构造函数或对象A的原型指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原型指向Object的原型。由此形成了一条链状结构,被称之为原型链。按照上述的描述,在B中定义的属性或方法,可以在A中使用并不需要...

    baiy 评论0 收藏0
  • [学习笔记] 小角度看JS原型

    摘要:虽然在脚本中没有标准的方式访问,但在每个对象上都支持一个属性,用于访问其构造函数的原型对象。说的是构造函数和原型对象之间的关系,说的是实例对象和原型对象之间的关系。 前言 在 segmentfault 上看到这样一道题目: var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

    Cciradih 评论0 收藏0
  • 《javascript高级程序设计》笔记:继承

    摘要:继承和前面两篇文章中的知识非常相关,如果对函数创建原理和原型链不熟悉,请猛戳高级程序设计笔记创建对象高级程序设计笔记原型图解继承,通俗的说,就是将自身不存在的属性或方法,通过某种方式为自己所用文章分别介绍原型链继承继承借用构造函数继承组合继 继承和前面两篇文章中的知识非常相关,如果对函数创建原理和原型链不熟悉,请猛戳:《javascript高级程序设计》笔记:创建对象《javascri...

    JerryC 评论0 收藏0
  • JS高程读书笔记--第六章原型继承

    摘要:高程读书笔记第六章理解对象创建自定义对象的方式有创建一个实例,然后为它添加属性和方法。创建了自定义的构造函数之后,其原型对象默认只会取得属性至于其他方法都是从继承而来的。 JS高程读书笔记--第六章 理解对象 创建自定义对象的方式有创建一个Object实例,然后为它添加属性和方法。还可用创建对象字面量的方式 属性类型 ECMAScript在定义只有内部采用的特性时,描述了属性的各种特征...

    EasonTyler 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<