【重温基础】15.JS对象介绍

时间 2019-11-21

原文原文链接

从这篇文章开始，复习 MDN 中级教程的内容了，在初级教程中，我和你们分享了一些比较简单基础的知识点，并放在个人【Cute-JavaScript】系列文章中。 javascript

关于【Cute-JavaScript】：
一本可爱的JavaScript小书，内容分红三大部分：ES规范系列、JS基础系列和面试题系列，目前我还在抓紧更新，喜欢的朋友能够 github 上Star一下呀，下面放一张首页图：
前端

正文开始 java

本文是 重温基础 系列文章的第十五篇。
今日感觉：耐心为人处世。 git

本章节复习的是JS中的关于对象还有原型等相关知识。 github

前置知识：
关于使用对象，能够先阅读一下个人《12.使用对象》这篇文章。面试

下面也先重温一点基础。正则表达式

1.概念

对象是一个包含相关数据和方法的集合，由变量和方法组成，一般称为对象的属性和方法，好比：chrome

let me = {
    name : 'pingan',
    eat: function(){
        console.log('eat eat eat!!!');
    }
}

其中，name就是me这个对象的一个属性，eat就是me这个对象的一个方法。
访问对象的属性是这样的：编程

me.name;   // "pingan"
me.eat();  // "eat eat eat!!!"

另外在访问对象属性时，有如下两种方式：segmentfault

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。

更加详细的介绍，能够查看下面参考文章。

参考文章：

1.MDN JavaScript 对象入门

2.基于js中的原型

本部份内容到这结束

系列目录：

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

欢迎关注微信公众号【前端自习课】天天早晨，与您一块儿学习一篇优秀的前端技术博文 .