重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript对象:你知道全部的对象分类吗?

winter 2019-02-02
你好,我是 winter。
在前面的课程中,我已经讲解了 JavaScript 对象的一些基础知识。但是,我们所讲解的对象,只是特定的一部分,并不能涵盖全部的 JavaScript 对象。
比如说,我们不论怎样编写代码,都没法绕开 Array,实现一个跟原生的数组行为一模一样的对象,这是由于原生数组的底层实现了一个自动随着下标变化的 length 属性。
并且,在浏览器环境中,我们也无法单纯依靠 JavaScript 代码实现 div 对象,只能靠 document.createElement 来创建。这也说明了 JavaScript 的对象机制并非简单的属性集合 + 原型。
我们日常工作中,接触到的主要 API,几乎都是由今天所讲解的这些对象提供的。理解这些对象的性质,我们才能真正理解我们使用的 API 的一些特性。

JavaScript 中的对象分类

我们可以把对象分成几类。
宿主对象(host Objects):由 JavaScript 宿主环境提供的对象,它们的行为完全由宿主环境决定。
内置对象(Built-in Objects):由 JavaScript 语言提供的对象。
固有对象(Intrinsic Objects ):由标准规定,随着 JavaScript 运行时创建而自动创建的对象实例。
原生对象(Native Objects):可以由用户通过 Array、RegExp 等内置构造器或者特殊语法创建的对象。
普通对象(Ordinary Objects):由{}语法、Object 构造器或者 class 关键字定义类创建的对象,它能够被原型继承。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(53)

  • William
    // 1. 利用字面量
    var a = [], b = {}, c = /abc/g
    // 2. 利用dom api
    var d = document.createElement('p')
    // 3. 利用JavaScript内置对象的api
    var e = Object.create(null)
    var f = Object.assign({k1:3, k2:8}, {k3: 9})
    var g = JSON.parse('{}')
    // 4.利用装箱转换
    var h = Object(undefined), i = Object(null), k = Object(1), l = Object('abc'), m = Object(true)
    2019-02-05
    96
  • 多啦斯基周
    这块的内容确实有些复杂,作者讲的很深入。
    但是个人觉得思路是否可以再整理一下,总是感觉有一些绕,把知识讲得更易理解一些呢?
    2019-02-14
    52
  • A-浩.
    一期比一期深入,一期比一期了解的更少了,蓝瘦
    2019-02-02
    38
  • kesikesie
    console.log(new Date); // 1
        console.log(Date())
    这个在控制台打印的都是日期
    2019-03-19
    4
    22
  • 吃不饱
    前端工作一年,好难理解。
    2019-02-08
    13
  • 利用构造器的执行规则来实现私有,真是个意外的发现

    之前用class构建一个类,有一些方法暴露给外面总觉得怪怪的。现在好了,在constructor函数里return一个对象,在对象里写方法来对应返回类里写的需要暴露的method就解决了
    2019-02-03
    2
    13
  • clannad-
    1.var o = [];
    2.document.createElement('div');
    3.Object.create(Object.prototype);
    4.var o = Object.assign({});
    5.var o = JSON.parse('{}');
    2019-02-02
    12
  • plasmatium
    try {
      Image()
    ) catch (err) {
      // 获得一个对象err
    }
    2019-02-02
    10
  • Geek_1d054d
    老师提到原生构造器无法继承。
    而阮一峰老师在http://es6.ruanyifeng.com/#docs/class-extends中表示,es6已经可以继承原生构造函数,并且能定义子类。
    以我的理解来看,阮一峰老师的说法没有问题。
    不知道老师怎么看?
    2019-05-19
    9
  • 老师好,看完文章后有两个小疑问
    1.Js的30多个构造器是怎么实现的?
    2.div对象虽然属性很多。那可以用纯js模拟吗?使用document.createElement的时候,浏览器还做了什么别的工作吗?
    2019-02-02
    7
  • Mr.Ren
    Symbol是没有constructor,不能使用new去实例化对象。
    2019-02-02
    7
  • AICC
    不那么规律不那么优雅看得云里雾里
    2019-02-02
    6
  • CC
    除了老师提到的:
    var o = {}
    var o = function(){}

    还有:

    // 使用 Object 构造器
    var o = new Object();

    // 使用 function
    var o = new function f() {};

    // 使用 method
    var o = Object.create(null)

    // 使用 ES6 class
    class myOwnObject {
      constructor(a) { this.a = a; }
    }
    var o = new myOwnObject(‘hey yo’);

    暂时想到这些。
    2019-02-02
    1
    6
  • Chen
    老师你说的那个console.log(new Date)和console.log(Date())在控制台全部输出时间字符串,咋回事
    2019-03-20
    1
    4
  • XXX
    关于原生构造器无法用 class/extend 语法来继承的观点,能否举例说明呢?我写个demo跑了一下,发现还是可以的呐

    作者回复: 能继承方法,但是没办法跟原生的一模一样

    2019-02-26
    3
  • Evo
    "用对象来模拟函数与构造器:函数对象与构造器对象" 最后一段:“如果我们的构造器返回来一个新的对象,那么new创建的新对象就变成了一个构造函数之外完全无法访问的对象”, 明明是“构造器中的某些属性可以被写成构造函数之外完全无法访问的属性”。
    2019-02-06
    3
  • Nirvana
    我发现老师很稀罕猫啊,都是猫的配图
    2019-02-03
    3
  • 深海
    本文 -用对象来模拟函数与构造器:函数对象与构造器对象- 结尾处,这样写道:
    「如果 [[call]] 的返回值是对象,那么,返回这个对象,否则返回第一步创建的新对象。」

    在《Javascript高级程序设计》——第6章 面对对象的程序设计 p160-p161的寄生构造函数模式有类似讲解:
    「构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句,可以重写调用构造函数时返回的值。 」
    2019-03-18
    1
    2
  • ttys000
    1、使用 Object 构造函数
    var person1 = new Object();
    2、使用对象字面量
    var person1 = {}
    3、工厂模式
    function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name);
        }
        return o;
    }
    var person1 = createPerson('zs', 18, 'programmer');
    var person2 = createPerson('ls', 28, 'teacter');
    4、构造函数
    function Person(){...}
    var p = new Person()
    5、原型模式
    function Person(){...}
    Person.prototype.x = ...
    var p = new Person()
    6、Object.create()
    2019-02-28
    2
  • 啊咩
    原生对象语法用extends继承,可以举一个具体的例子嘛?我试了下继承Array是可以的呀
    2019-02-05
    2
收起评论
53
返回
顶部