从这篇文章开始,复习 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理解原型

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

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

ObjectFunction的实例,而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_是个非标准属性,因此只有ffchrome两个浏览器支持,标准方法是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原型链的概念。

总结:

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

更加详细的介绍,可以查看下面参考文章。


参考文章:

1.MDN JavaScript 对象入门

2.基于js中的原型

本部分内容到这结束

系列目录:

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com

【重温基础】15.JS对象介绍的更多相关文章

  1. 【重温基础】17.WebAPI介绍

    本文是 重温基础 系列文章的第十七篇. 今日感受:挑战. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 [重温基础 ...

  2. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 【重温基础】JS中的常用高阶函数介绍

    Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以 ...

  4. 【重温基础】16.JSON对象介绍

    本文是 重温基础 系列文章的第十六篇. 今日感受:静. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 本章节复习的 ...

  5. 【重温基础】11.Map和Set对象

    本文是 重温基础 系列文章的第十一篇. 今日感受:注意身体,生病花钱又难受. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2 ...

  6. FormData js对象的介绍和使用

    FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...

  7. javascript基础-js对象

    一.js对象的创建 1.普通最简单的方式 var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = ...

  8. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  9. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

随机推荐

  1. 020.掌握Pod-Pod基础使用

    一 Pod定义详解 1.1 完整Pod定义文件 apiVersion: v1 #必选,版本号,例如v1,版本号必须可以用 kubectl api-versions 查询到 kind: Pod #必选, ...

  2. java编程思想第四版第七章习题

    (略) (略) (略) (略) 创建两个带有默认构造器(空参数列表)的类A和类B.从A中继承产生一个名为C的新,并在C内创建一个B类的成员.不要给C编写构造器.创建一个C类的对象并观察其结果. pac ...

  3. ZeroC ICE的协议

  4. 最新版 IDEA 2019.2.4 下载安装 & 破解使用期限至2089年

    一.准备 官网下载链接:https://www.jetbrains.com/idea/download/#section=windows 根据自己系统选择对应版本,这里选择Windows的UItima ...

  5. C# 彻底搞懂async/await

    前言 Talk is cheap, Show you the code first! private void button1_Click(object sender, EventArgs e) { ...

  6. MyBatis 数值类型 where 条件配置的坑

    复现异常 我们先通过案例复现该类异常,测试项目地址:https://gitee.com/yin_jw/demo/tree/master/mybatis-demo/springboot-mybatis- ...

  7. 闲来无事写了一套 Jenkins 主题样式:刀锋

    背景 Jenkins 的前端 CSS 样式坚挺了这么多年已经觉得腻的不行了,于是想换个风格缓解一下视觉疲劳,便有了这个项目.由于本人不是前端,所以很多只是随便改改,有些复杂的需求也实现不了,但是总的来 ...

  8. nginx的使用,以及反向代理,负载均衡,从安装到使用,全部步骤。

    先总结nginx实现负载均衡的原理,在这之前先的知道反向代理,因为nginx的负载均衡是在反向代理的基础上实现的: 1.反向代理:通过在nginx的配置文件 (vim /opt/nginx196/co ...

  9. python基础-网络编程part02

    TCP协议 TCP是传输控制协议,建立双向通道. 三次握手,建立连接 客户端向服务端发送建立连接的请求 服务端接收请求返回确认信息给客户端,并向客户端发送建立连接的请求 客户端接收请求返回确认信息给服 ...

  10. ASI和AFN的区别

    ASI总结 发送请求的2个对象 1.发送GET请求 ASIHttpRequest 2.发送POST请求 ASIFormDataRequest 二发送请求 1.同步请求 startSynchronous ...