前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >构造对象,原型和原型链笔记

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

作者头像
bamboo
发布2019-01-29 15:55:58
4800
发布2019-01-29 15:55:58
举报
文章被收录于专栏:bamboo前端学习记录

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

一、OOP(Object-oriented programming, 面向对象编程)

1、wiki的解释

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

2、面向对象的思路:

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

3、例子

代码语言:javascript
复制
面向对象的写法

Car.拧钥匙()
Car.挂挡()
Car.踩油门()

二、构造对象

1、代码

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

代码语言:javascript
复制
function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}
var p = new Person('hunger')

2、instanceof

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

代码语言:javascript
复制
p1 instanceof Person; // true
p1 instanceof Object;// true

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

代码语言:javascript
复制
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相当于特定类型所有实例都可以访问到的一个公共容器,一般用来共同调用的函数

clipboard.png
clipboard.png

总结:

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

5、举个栗子

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

clipboard.png
clipboard.png

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

clipboard.png
clipboard.png

三、原型和原型链

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

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

clipboard.png
clipboard.png

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

clipboard.png
clipboard.png
clipboard.png
clipboard.png

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

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

clipboard.png
clipboard.png

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

  1. 当 new 一个函数的时候会创建一个对象,『函数.prototype』 等于 『被创建对象.__proto__』
  2. 一切函数都是由 Function 这个函数创建的,所以『Function.prototype === 被创建的函数.__proto__』
  3. 一切函数的原型对象都是由 Object 这个函数创建的,所以『Object.prototype === 一切函数.prototype.__proto__』

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-01-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、OOP(Object-oriented programming, 面向对象编程)
    • 1、wiki的解释
      • 2、面向对象的思路:
        • 3、例子
        • 二、构造对象
          • 1、代码
            • 2、instanceof
              • 3、构造函数的过程
                • 4、构造函数的原型链
                  • 5、举个栗子
                  • 三、原型和原型链
                    • 1、查找数组valueof方法,讲原型链
                      • 2、关于原型链的规律总结
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档