编程教育资源分享平台

网站首页 > 后端开发 正文

「JavaScript 从入门到精通」15.JS对象介绍

luoriw 2024-02-01 14:30:40 后端开发 14 ℃ 0 评论

前置知识:

关于使用对象,可以先阅读一下我的《「JavaScript 从入门到精通」12.使用对象》这篇文章。

下面也先重温一点基础。

1.概念

对象是一个包含相关数据和方法的集合,由变量和方法组成,通常称为对象的属性和方法,比如:

其中,name就是me这个对象的一个属性,eat就是me这个对象的一个方法。

访问对象的属性是这样的:

另外在访问对象属性时,有以下两种方式:

括号表示法中,必须是字符串。

我们常常这么设置对象的属性:

2.简单的面向对象介绍

这里简单介绍下JavaScrip的面向对象编程OOP。

面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。

我们这里定义一个简单的对象模型,比如我,我的身上可能有很多信息(姓名,年龄,身高等等),这时候我们可以将这些信息抽取出来,像这样:

这样我们就将我的信息抽取成一个JS的对象了,但是这样有个局限性,这样定义的话,一次只能定义一个人,如果这时候,有一百个人,那么我们就需要定义一百个这样的对象,显然这是不可取的。

所以,这里就引入一个重要的函数——构造函数,将相同的特性封装成通用的对象,实现定义一次,其他地方都可以使用,这也是OOP的核心思想:

创建一个函数“Person”,只要传入不同的name即可得到不同的对象:

但是似乎Person对象的定义,显得不够精简,因为还要定义一个空对象来接收各个属性和方法,幸好JavaScrip在构造函数中提供一个便捷的方法,我们将代码改造下:

对于this关键词,即无论是该对象的哪个实例被构造函数创建,它的name属性都是参数name的值,doSomething方法中使用的也是参数name。简单理解就是用this指代了Person。

构造函数通常首字母大写,用于区分普通函数。

接下来,通过new关键词,使用前面创建的构造函数(使用构造函数也叫实例化):

然后一个简单的构造函数就写好了,通常在开发的时候,可能会有很多的参数:

3.JS中的原型

3.1理解原型

这里需要先了解一下Object和Function,这两个函数都是JS的自带函数,Object继承自己,Function继承自己,相互继承对方,即Object和Function既是函数也是对象。

Object 是 Function的实例,而Function是它自己的实例。

另外,只有通过Function创建的函数都是函数对象,其他都是普通对象(通常由Object创建):

理论知识:

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。

原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链(prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

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

个人理解:

  • JS中所有的函数对象,都有一个prototype属性,对应当前对象的原型,但普通对象没有,而prototype属性下还有一个constructor,指向这个函数。

  • JS中所有的对象,都有一个_proto_属性,指向实例对象的构造函数原型(由于_proto_是个非标准属性,因此只有ff和chrome两个浏览器支持,标准方法是Object.getPrototypeOf())。

修改原型:

经常我们也需要对原型进行修改:

这里也说明了原型进行继承,p继承Person原型中新增的函数属性getName。

3.2原型链

概念:

javascript中,每个对象都会在内部生成一个 proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去 proto 指向的对象里面找,一层一层找下去,,知道找到为止,如果到了原型链顶端,还没找到,则返回undefined,这就是javascript原型链的概念。

总结:

  • 除了Object的prototype的原型是null,所有对象和原型都有自己的原型,对象的原型指向原型对象。
  • JS中所有的东西都是对象,所有的东西都由Object衍生而来, 即所有东西原型链的终点指向null。

公众号:前端自习课

往期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

「JavaScript 从入门到精通」8.字符串

「JavaScript 从入门到精通」9.正则表达式

「JavaScript 从入门到精通」10.数组

「JavaScript 从入门到精通」11.Map和Set对象

「JavaScript 从入门到精通」12.使用对象

「JavaScript 从入门到精通」13.迭代器和生成器

「JavaScript 从入门到精通」14.元编程

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言