【重温基础】15.JS对象介绍
从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 【Cute-JavaScript】系列文章中。
关于【Cute-JavaScript】:
一本可爱的JavaScript小书,内容分成三大部分:ES规范系列、JS基础系列和面试题系列,目前我还在抓紧更新,喜欢的朋友可以 github 上Star一下呀,下面放一张首页图:
正文开始
本文是 重温基础 系列文章的第十五篇。
今日感受:耐心为人处世。
本章节复习的是JS中的关于对象还有原型等相关知识。
前置知识:
关于使用对象,可以先阅读一下我的《12.使用对象》这篇文章。
下面也先重温一点基础。
1.概念
对象是一个包含相关数据和方法的集合,由变量和方法组成,通常称为对象的属性和方法,比如:
let me = {
name : 'pingan',
eat: function(){
console.log('eat eat eat!!!');
}
}
其中,name
就是me
这个对象的一个属性,eat
就是me
这个对象的一个方法。
访问对象的属性是这样的:
me.name; // "pingan"
me.eat(); // "eat eat eat!!!"
另外在访问对象属性时,有以下两种方式:
let me = {
name : 'pingan',
}
// 点表示法
me.name; // me.name => "pingan"
// 括号表示法
me["name"];// me.name => "pingan"
括号表示法中,必须是字符串。
我们常常这么设置对象的属性:
let me = {
name : 'pingan',
}
// 点表示法
me.name = "leo"; // me => {name: "leo"}
// 括号表示法
me["name"] = "leo";// me => {name: "leo"}
2.简单的面向对象介绍
这里简单介绍下JavaScrip的面向对象编程OOP。
面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。 —— 百度百科
我们这里定义一个简单的对象模型,比如我,我的身上可能有很多信息(姓名,年龄,身高等等),这时候我们可以将这些信息抽取出来,像这样:
let leo = {
name : 'leo',
age : 26,
height : 180,
}
这样我们就将我的信息抽取成一个JS的对象了,但是这样有个局限性,这样定义的话,一次只能定义一个人,如果这时候,有一百个人,那么我们就需要定义一百个这样的对象,显然这是不可取的。
所以,这里就引入一个重要的函数——构造函数,将相同的特性封装成通用的对象,实现定义一次,其他地方都可以使用,这也是OOP的核心思想:
// 传入 name 参数使得可以定义任何人作为对象
function Person (name){
let me = {};
me.name = name;
me.doSomething = function(){
console.log(me.name);
}
return me;
}
创建一个函数“Person
”,只要传入不同的name
即可得到不同的对象:
let leo = Person("leo");
leo.name; // "leo"
let pingan = Person("pingan");
pingan.name; // "pingan"
但是似乎Person
对象的定义,显得不够精简,因为还要定义一个空对象来接收各个属性和方法,幸好JavaScrip在构造函数中提供一个便捷的方法,我们将代码改造下:
function Person (name){
this.name = name;
this.doSomething = function(){
console.log(this.name);
}
}
对于this
关键词,即无论是该对象的哪个实例被构造函数创建,它的name
属性都是参数name
的值,doSomething
方法中使用的也是参数name
。简单理解就是用this
指代了Person
。
构造函数通常首字母大写,用于区分普通函数。
接下来,通过new
关键词,使用前面创建的构造函数(使用构造函数也叫实例化):
let leo = new Person("leo");
leo.name; // "leo"
let pingan = new Person("pingan");
pingan.name; // "pingan"
然后一个简单的构造函数就写好了,通常在开发的时候,可能会有很多的参数:
function Man(name, age, height, weight){
this.name = name;
this.age = age + '岁';
this.HeightAndWeight = {
height,
weight
};
this.doSomething = function (){
console.log(`
${this.name}: height:${this.HeightAndWeight.height}m,
weight:${this.HeightAndWeight.weight}Kg!!`
);
};
}
let leo = new Man("leo",25,1.8,68);
leo.doSomething(); // leo: height:1.8m, weight:68Kg!!
3.JS中的原型
3.1理解原型
这里需要先了解一下Object
和Function
,这两个函数都是JS的自带函数,Object
继承自己,Function
继承自己,相互继承对方,即Object
和Function
既是函数也是对象。
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
Object
是 Function
的实例,而Function
是它自己的实例。
console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype); // Object
另外,只有通过Function
创建的函数都是函数对象,其他都是普通对象(通常由Object
创建):
function f1(){};
typeof f1 //"function"
var o1 = new f1();
typeof o1 //"object"
var o2 = {};
typeof o2 //"object"
理论知识:
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。
原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。
准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype
属性上,而非对象实例本身。
个人理解:
- JS中所有的函数对象,都有一个
prototype
属性,对应当前对象的原型,但普通对象没有,而prototype
属性下还有一个constructor
,指向这个函数。
var p = {};
p.prototype; // undefined
p instanceof Object; // true
function f (){};
f.prototype; // object {constructor: ƒ}
f === f.prototype.constructor; // true
Object === Object.prototype.constructor; // true
- JS中所有的对象,都有一个
_proto_
属性,指向实例对象的构造函数原型(由于_proto_
是个非标准属性,因此只有ff和chrome两个浏览器支持,标准方法是Object.getPrototypeOf()
)。
var p = new Person();
p._proto === Person.prototype; //true
修改原型:
经常我们也需要对原型进行修改:
function Person (name){
this.name = name;
}
// 添加一个getName方法
Person.prototype.getName = function(){
return "名字:" + this.name;
}
var p = new Person("leo");
p.getName(); // "名字:leo"
这里也说明了原型进行继承,p
继承Person
原型中新增的函数属性getName
。
3.2原型链
概念:
javascript中,每个对象都会在内部生成一个 proto
属性,当我们访问一个对象属性时,如果这个对象不存在就回去 proto
指向的对象里面找,一层一层找下去,,知道找到为止,如果到了原型链顶端,还没找到,则返回undefined
,这就是javascript原型链的概念。
总结:
- 除了
Object
的prototype
的原型是null
,所有对象和原型都有自己的原型,对象的原型指向原型对象。 - JS中所有的东西都是对象,所有的东西都由
Object
衍生而来, 即所有东西原型链的终点指向null。
更加详细的介绍,可以查看下面参考文章。
参考文章:
本部分内容到这结束
系列目录:
- 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
- 【重温基础】1.语法和数据类型
- 【重温基础】2.流程控制和错误处理
- 【重温基础】3.循环和迭代
- 【重温基础】4.函数
- 【重温基础】5.表达式和运算符
- 【重温基础】6.数字
- 【重温基础】7.时间对象
- 【重温基础】8.字符串
- 【重温基础】9.正则表达式
- 【重温基础】10.数组
- 【重温基础】11.Map和Set对象
- 【重温基础】12.使用对象
- 【重温基础】13.迭代器和生成器
- 【重温基础】14.元编程
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
JS小册 | js.pingan8787.com |
【重温基础】15.JS对象介绍的更多相关文章
- 【重温基础】17.WebAPI介绍
本文是 重温基础 系列文章的第十七篇. 今日感受:挑战. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 [重温基础 ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【重温基础】JS中的常用高阶函数介绍
Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以 ...
- 【重温基础】16.JSON对象介绍
本文是 重温基础 系列文章的第十六篇. 今日感受:静. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 本章节复习的 ...
- 【重温基础】11.Map和Set对象
本文是 重温基础 系列文章的第十一篇. 今日感受:注意身体,生病花钱又难受. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2 ...
- FormData js对象的介绍和使用
FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...
- javascript基础-js对象
一.js对象的创建 1.普通最简单的方式 var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = ...
- 深入浅出node.js游戏服务器开发1——基础架构与框架介绍
2013年04月19日 14:09:37 MJiao 阅读数:4614 深入浅出node.js游戏服务器开发1——基础架构与框架介绍 游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
随机推荐
- 020.掌握Pod-Pod基础使用
一 Pod定义详解 1.1 完整Pod定义文件 apiVersion: v1 #必选,版本号,例如v1,版本号必须可以用 kubectl api-versions 查询到 kind: Pod #必选, ...
- java编程思想第四版第七章习题
(略) (略) (略) (略) 创建两个带有默认构造器(空参数列表)的类A和类B.从A中继承产生一个名为C的新,并在C内创建一个B类的成员.不要给C编写构造器.创建一个C类的对象并观察其结果. pac ...
- ZeroC ICE的协议
- 最新版 IDEA 2019.2.4 下载安装 & 破解使用期限至2089年
一.准备 官网下载链接:https://www.jetbrains.com/idea/download/#section=windows 根据自己系统选择对应版本,这里选择Windows的UItima ...
- C# 彻底搞懂async/await
前言 Talk is cheap, Show you the code first! private void button1_Click(object sender, EventArgs e) { ...
- MyBatis 数值类型 where 条件配置的坑
复现异常 我们先通过案例复现该类异常,测试项目地址:https://gitee.com/yin_jw/demo/tree/master/mybatis-demo/springboot-mybatis- ...
- 闲来无事写了一套 Jenkins 主题样式:刀锋
背景 Jenkins 的前端 CSS 样式坚挺了这么多年已经觉得腻的不行了,于是想换个风格缓解一下视觉疲劳,便有了这个项目.由于本人不是前端,所以很多只是随便改改,有些复杂的需求也实现不了,但是总的来 ...
- nginx的使用,以及反向代理,负载均衡,从安装到使用,全部步骤。
先总结nginx实现负载均衡的原理,在这之前先的知道反向代理,因为nginx的负载均衡是在反向代理的基础上实现的: 1.反向代理:通过在nginx的配置文件 (vim /opt/nginx196/co ...
- python基础-网络编程part02
TCP协议 TCP是传输控制协议,建立双向通道. 三次握手,建立连接 客户端向服务端发送建立连接的请求 服务端接收请求返回确认信息给客户端,并向客户端发送建立连接的请求 客户端接收请求返回确认信息给服 ...
- ASI和AFN的区别
ASI总结 发送请求的2个对象 1.发送GET请求 ASIHttpRequest 2.发送POST请求 ASIFormDataRequest 二发送请求 1.同步请求 startSynchronous ...