前言

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链,它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说,这些属性和方法定义在Object的构造器函数之上的 prototype 属性上,而非对象实例本身。

构造器

在Java中需要构造器才可以实例化对象,构造器被定义在类代码块中。

在JavaScript中构造器无需被定义在特定代码块中,一个函数便可以实例化对象。函数的名要遵循驼峰命名法,标识该函数为对象的构造器。

function Range() {}
function Range(x, y) {
this.x = x
this.y = y
} let a = new Range() // 实例化对象,使用无参构造
let b = new Range(1, 10) // 实例化对象,使用有参构造

Object

几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

let a = new Array()

如图所示,Array 的原型对象指向的是 Object :

Date、Math、Boolean 等 JavaScript 对象的原型指向的最终都是 Object。

原型对象

JavaScript 对象都会从原型对象中继承属性和方法。

Object.prototype.print = function _print() {
console.log('hello world!')
}
let o = new Range(1, 10) // 实例化Range

对象 o 的原型对象是 Object,并且它会继承来自原型对象的属性或方法(函数):

当我们执行 o.print() 时,若它自身没有此函数,则从原型对象中寻找。该过程是持续的,直到匹配到对应的函数或原型对象为 null 才停止。形成一种链式关系,也叫做原型链。

原型链

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

从 ES6 开始,可以通过 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问器来访问原型对象。它等同于非标准但许多浏览器实现的属性 __proto__

function MaskFactory() {}
MaskFactory.prototype.product = '口罩' function Market() {}
Market.prototype = new MaskFactory() let market = new Market() // 实例化Market对象 console.dir(Object.getPrototypeOf(market).product) // 口罩
// 等同于 console.dir(Market.prototype.product)

对象的原型与构造函数的 prototype 属性之间的区别是很重要的。前者是每个实例上都有的属性,后者是构造函数的属性。也就是说,Object.getPrototypeOf(market).product 和 Market.prototype.product 指向着同一个对象的属性。

JavaScript 基础知识(一):对象以及原型的更多相关文章

  1. JavaScript基础知识(对象、函数与对象)

    17.对象 属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如Strin ...

  2. JavaScript基础知识----document对象

    对象属性document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设 ...

  3. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  4. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  5. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  6. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  7. 扩展javascript扩展(类,对象,原型)

     扩展javascript扩展(类,对象,原型)

  8. JavaScript基础知识(JSON、Function对象、原型、引用类型)

    19.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式  特点:易于程序员编写和查看:易于计算机解析和生成 数据结构 ...

  9. javascript的基础知识及面向对象和原型属性

    自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; cons ...

随机推荐

  1. 探究Presto SQL引擎(3)-代码生成

    ​ vivo 互联网服务器团队- Shuai Guangying 探究Presto SQL引擎 系列:第1篇<探究Presto SQL引擎(1)-巧用Antlr>介绍了Antlr的基本用法 ...

  2. 前端ES6 特性兼容查询

    ES6 http://kangax.github.io/compat-table/es6/ ES5 http://kangax.github.io/compat-table/es5/ ES 2016+ ...

  3. 6000字Locust入门详解

    目录 一.Locust 性能测试 (一). 性能测试工具 主流性能测试工具对比 认识Locust (二) locust 基本用法 1.安装locust 2.编写用例 3. 启动测试 GUI 模式启动 ...

  4. JS:Array

    js有五种基本数据类型:string,number,boolean,null,undefined 一种引用类型,包括:1.Object类型:2.Function类型:3.Array类型:4.RegEx ...

  5. 关于android里activity之间利用button组件使用intent跳转页面

    在需要跳转的activity 中 添加 Button button = findViewById(R.id.login);button.setOnClickListener(new View.OnCl ...

  6. (原创)【MAUI】一步一步实现“悬浮操作按钮”(FAB,Floating Action Button)

    一.前言 MAUI,跨平台的 GUI 框架,基本介绍本文不再赘述. 话不多说,既然可以跨平台,那么我们就来实现一个在移动端很常用的控件:悬浮操作按钮(FAB,Floating Action Butto ...

  7. Spring Boot 整合 minio(一步到位)

    按照这个步骤来,宝贝保你一步到位 一.minio版本安装:这里我安装的新版本 新版本安装 # docker 下载镜像 docker pull minio/minio # 安装镜像 docker run ...

  8. [零基础学IoT Pwn] 复现Netgear WNAP320 RCE

    [零基础学IoT Pwn] 复现Netgear WNAP320 RCE 0x00 前言: 这是[零基础学IoT Pwn]的第二篇,上篇我们搭好了仿真环境后,模拟运行了Netgear WNAP320固件 ...

  9. 面试官:Redis 过期删除策略和内存淘汰策略有什么区别?

    作者:小林coding 计算机八股文网站:https://xiaolincoding.com 大家好,我是小林. Redis 的「内存淘汰策略」和「过期删除策略」,很多小伙伴容易混淆,这两个机制虽然都 ...

  10. Zend Studio,php 生成报错

    Zend Studio  Description Resource Path Location Type Undefined CSS file ("../red-treeview.css&q ...