JavaScript 类型、原型与继承学习笔记

目录

• 1、概览
• 2、数据类型
  • 1. JavaScript中的数据类型
  • 2. 什么是基本类型（Primitive Data Type）
    • 2.1 概念
    • 2.2 七个基本类型
    • 2.3 基本类型封装对象
  • 3. 什么是对象类型（Object）
    • 3.1 四类特殊对象
    • 3.2 对象是属性的集合
    • 3.3 对象的建立
    • 3.4 对象的访问
    • 3.5 引用类型
    • 3.6 和Lua中Table的比较
• 3、面向对象
  • 1. 意义
  • 2. 原型与继承
  • 3. 自定义对象
    • 如何建立相似对象
    • 构造器和new
    • 构造器的prototype属性
• 4、参考

---

这篇笔记中有什么：

✔️JavaScript的极简介绍
✔️JavaScript中数据类型的简单梳理
✔️JavaScript中的面向对象原理

这篇笔记中没有什么：

❌JavaScript的具体语法
❌JavaScript经过各类内置对象实现的其余特性

---

1、概览

• 解释型，或者说即时编译型（ Just-In-Time Compiled ）语言。
• 多范式动态语言，原生支持函数式编程，经过原型链支持面向对象编程。
• 实际上是和Java是彻底不一样的东西。设计中有参考Java的数据结构和内存管理、C语言的基本语法，但理念上并不类似。
• 最开始是专门为浏览器设计的一门脚本语言，但如今也被用于不少其余环境，甚至能够在任意搭载了JavaScript引擎的设备中执行。

2、数据类型

1. JavaScript中的数据类型

最新的标准中，定义了8种数据类型。其中包括：

• 7种基本类型：Number、String、Boolean、BigInt、Null、Undefined以及ES2016新增的Symbol。
• 1种复杂类型：Object。

2. 什么是基本类型（Primitive Data Type）

2.1 概念

基本数据类型，有些版本也译为原始数据类型。

什么是基本类型？看一下MDN上给出的定义：

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.

基本类型是最底层的类型，不是对象，没有方法。

全部基本数据类型的值都是不可改变的——能够为变量赋一个新值、覆盖原来的值，可是没法直接修改值自己。

这一点对于number、boolean来讲都很直观，可是对于字符串来讲可能须要格外注意：同一块内存中的一个字符串是不能够部分修改的，必定是总体从新赋值。

var a = "hello"; // 一个string类型的变量，值为“hello”
  console.log(a); // hello
  console.log(typeof a); // string
  a[0] = "H"; 
  console.log(a); // hello
  var c = a; // world
  c = c + " world"; // 这里，并无改变原本的hello，而是开辟了新的内存空间,构造了新的基本值“hello world”
  console.log(c); // hello world

2.2 七个基本类型

• 布尔 boolean
  • 取值为true和false。
  • 0、""、NaN、null、undefined也会被转换为false。
• Null
  • Null类型只有一个值：null。表示未被声明的值。
  • 注意：因为历史缘由，typeof null的结果是"object"。
• undefined
  • 未初始化的值（声明了可是没有赋值）。

var a;
	console.log(typeof a); // undefined
	console.log(typeof a);  // "undefined"

• 数字 number
  • 64位双精度浮点数（并无整数和浮点数的区别）。
• 大整数 bigint
  • 能够用任意精度表示整数。
  • 经过在整数末尾附加n或调用构造函数来建立。
  • 不能够与Number混合运算，会报类型错误。须要先进行转换。
• 字符串 string
  • Unicode字符序列。
• 符号 Symbol
  • 能够用来做为Object的key的值（默认私有）。
  • 经过Symbol()函数构造，每一个从该函数返回的symbol值都是惟一的。
  • 可使用可选的字符串来描述symbol，仅仅至关于注释，可用于调试。

var sym1 = Symbol("abc");
	var sym2 = Symbol("abc");
	console.log(sym1 == sym2); // false
	console.log(sym1 === sym2); // false

2.3 基本类型封装对象

接触了一些JavaScript的代码，又了解了它对类型的分类以后，可能会感到很是困惑：基本数据类型不是对象，没有方法，那么为何又常常会看到对字符串、数字等“基本类型”的变量调用方法呢？

以下面的例子：

var str = "hello";

console.log(typeof str); // string
console.log(str.charAt(2)); // "l"

能够看到，str的类型确实是基本类型string，理论上来讲并非对象。可是咱们实际上却可以经过点运算符调用一些为字符串定义的方法。这是为何呢？

其实，执行str.charAt(2)的时候发生了不少事情，远比咱们所看到的一个“普通的调用”要复杂。

Java中有基本类型包装类的概念。好比：Integer是对基本int类型进行了封装的包装类，提供一些额外的函数。

在JavaScript中，原理也是如此，只是在形式上进行了隐藏。JavaScript中，定义了原生对象String，做为基本类型string的封装对象。咱们看到的charAt()方法，实际上是String对象中的定义。当咱们试图访问基本类型的属性和方法时，JavaScript会自动为基本类型值封装出一个封装对象，以后从封装对象中去访问属性、方法。并且，这个对象是临时的，调用完属性以后，包装对象就会被丢弃。

这也就解释了一件事：为何给基本类型添加属性不会报错，可是并不会有任何效果。由于，添加的属性其实添加在了临时对象上，而临时对象很快就被销毁了，并不会对原始值形成影响。

封装对象有： String、Number、Boolean 和 Symbol。

咱们也能够经过new去显性地建立包装对象（除了Symbol）。

var str = "hello";
var num = 23;
var bool = false;
var S = new String(str)
var N = new Number(num)
var B = new Boolean(bool);
console.log(typeof S); //object
console.log(typeof N); // object
console.log(typeof B); // object

通常来讲，将这件事托付给JavaScript引擎去作更好一些，手动建立封装对象可能会致使不少问题。

包装对象做为一种技术上的实现细节，不须要过多关注。可是了解这个原理有助于咱们更好地理解和使用基本数据类型。

3. 什么是对象类型（Object）

3.1 四类特殊对象

• 函数 Function
  • 每一个JavaScript函数实际上都是一个Function对象
  • JavaScript中，函数是“一等公民”，也就是说，函数能够被赋值给变量，能够被做为参数，能够被做为返回值。（这个特性Lua中也有）
  • 所以，能够将函数理解为，一种附加了可被调用功能的普通对象。
• 数组 Array
  • 用于构造数组的全局对象。数组是一种类列表的对象。Array的长度可变，元素类型任意，所以多是非密集型的。数组索引只能是整数，索引从0开始
  • 访问元素时经过中括号
  • 日期 Date
  • 经过new操做符建立
• 正则 RegExp
  • 用于将文本与一个模式进行匹配

3.2 对象是属性的集合

对象是一种特殊的数据，能够看作是一组属性的集合。属性能够是数据，也能够是函数（此时称为方法）。每一个属性有一个名称和一个值，能够近似当作是一个键值对。名称一般是字符串，也能够是Symbol。

3.3 对象的建立

var obj = new Object(); // 经过new操做符
var obj = {}; // 经过对象字面量（object literal）

3.4 对象的访问

有两种方式来访问对象的属性，一种是经过点操做符，一种是经过中括号。

var a = {};
a["age"] = 3; // 添加新的属性
console.log(a.age); // 3
for(i in a){
  console.log(i); // "age"
  console.log(a[i]); // 3
}

对于对象的方法，若是加括号，是返回调用结果；若是不加括号，是返回方法自己，能够赋值给其余变量。

var a = {name : "a"};
a.sayHello = function(){
  console.log(this.name + ":hello");
}
var b = {name : "b"};
b.saySomething = a.sayHello;
b.saySomething(); //"b:hello"

注：函数做为对象的方法被调用时，this值就是该对象。

3.5 引用类型

有些地方会用到引用类型这个概念来指代Object类型。要理解这个说法，就须要理解javascript中变量的访问方式。

• 基本数据类型的值是按值访问的

• 引用类型的值是按引用访问的

按值访问意味着值不可变、比较是值与值之间的比较、变量的标识符和值都存放在栈内存中。赋值时，进行的是值的拷贝，赋值操做后，两个变量互相不影响。

按引用访问意味着值可变（Object的属性能够动态的增删改）、比较是引用的比较（两个不一样的空对象是不相等的）、引用类型的值保存在堆内存中，栈内存里保存的是地址。赋值时，进行的是地址值的拷贝，复制操做后两个变量指向同一个对象。经过其中一个变量修改对象属性的话，经过另外一个变量去访问属性，也是已经被改变过的。

3.6 和Lua中Table的比较

Object类型的概念和Lua中的table类型比较类似。变量保存的都是引用，数据组织都是类键值对的形式。table中用原表（metatable）来实现面向对象的概念，Javascript中则是用原型（prototype）。
目前看到的类似点比较多，差别性有待进一步比较。

3、面向对象

1. 意义

编程时常常会有重用的需求。咱们但愿可以大规模构建同种结构的对象，有时咱们还但愿可以基于某个已有的对象构建新的对象，只重写或添加部分新的属性。这就须要“类型和继承”的概念。

Javascript中并无class实现，除了基本类型以外只有Object这一种类型。可是咱们能够经过原型继承的方式实现面向对象的需求。

注：ECMAScript6中引入了一套新的关键字用来实现class。可是底层原理仍然是基于原型的。此处先不提。

2. 原型与继承

Javascript中，每一个对象都有一个特殊的隐藏属性[[Prototype]]，它要么为null，要么就是对另外一个对象的引用。被引用的对象，称为这个对象的原型对象。

原型对象也有一个本身的[[Prototype]]，层层向上，直到一个对象的原型对象为null。

能够很容易地推断出，这是一个链状，或者说树状的关系。null是没有原型的，是全部原型链的终点。

如前文所说，JavaScript中的Object是属性的集合。原型属性将多个Obeject串连成链。当试图访问一个对象的属性时，会首先在该对象中搜索，若是没有找到，那么会沿着原型链一路搜索上去，直到在某个原型上找到了该属性或者到达了原型链的末尾。Javascript就是经过这种形式，实现了继承。

从原理来看，能够很天然地明白，原型链前端的属性会屏蔽掉后端的同名属性。

函数在JavaScript中是一等公民，函数的继承与和其余属性的继承没有区别。

须要注意的是，在调用一个方法obj.method()时，即便方法是从obj的原型中获取的，this始终引用obj。方法始终与当前对象一块儿使用。

3. 自定义对象

如何建立相似对象

继承一个对象能够经过原型，那么如何可复用地产生对象呢？

可使用函数来模拟咱们想要的“类”。实现一个相似于构造器的函数，在这个函数中定义并返回咱们想要的对象。这样，每次调用这个函数的时候咱们均可以产生一个同“类”的新对象。

function makePerson(name, age){
    return {
        name: name,
        age: age,
        getIntro:function(){
            return "Name:" + this.name + " Age:" + this.age;
        };
    };
}
var xiaoming = makePerson("Xiaoming", 10);
console.log(xiaoming.name, xiaoming.age); // "Xiaoming" 10
console.log(xiaoming.getIntro()); // "Name:Xiaoming Age:10"

关键字this，使用在函数中时指代的老是当前对象——也就是调用了这个函数的对象。

构造器和new

咱们可使用this和关键字new来对这个构造器进行进一步的封装。

关键字new能够建立一个崭新的空对象，使用这个新对象的this来调用函数，并将这个this做为函数返回值。咱们能够在函数中对this进行属性和方法的设置。

这样，咱们的函数就是一个能够配合new来使用的真正的构造器了。

一般构造器没有return语句。若是有return语句且返回的是一个对象，则会用这个对象替代this返回。若是是return的是原始值，则会被忽略。

function makePerson(name, age){
    this.name = name;
    this.age = age;
    this.getIntro = function(){
        return "Name:" + this.name + " Age:" + this.age;
    };
}
var xiaoming = new makePerson("Xiaoming", 10);
console.log(xiaoming.name, xiaoming.age); // "Xiaoming" 10
console.log(xiaoming.getIntro()); // "Name:Xiaoming Age:10"

构造器的prototype属性

上面的实现能够炮制咱们想要的自定义对象，可是它和C++中的class比还有一个很大的缺点：每一个对象中都包含了重复的函数对象。可是若是咱们把这个函数放在外面实现，又会增长没必要要的全局函数。

JavaScript提供了一个强大的特性。每一个函数对象都有一个prototype属性，指向某一个对象。经过new建立出来的新对象，会将构造器的prototype属性赋值给本身的[[Prototype]]属性。也就是说，每个经过new 构造器函数生成出来的对象，它的[[Prototype]]都指向构造器函数当前的prototype所指向的对象。

注意，函数的prototype属性和前文所说的隐藏的[[Prototype]]属性并非一回事。

函数对象的prototype是一个名为“prototype”的普通属性，指向的并非这个函数对象的原型。函数对象的原型保存在函数对象的[[Prototype]]中。

事实上，每一个函数对象均可以当作是经过new Function()构造出来的，也就是说，每一个函数对象的[[Prototype]]属性都由Funtion的prototype属性赋值而来。

咱们定义的函数对象，默认的prototype是一个空对象。咱们能够经过改变这个空对象的属性，动态地影响到全部以这个对象为原型的对象（也就是从这个函数生成的全部对象）。

因而上面的例子能够改写为：

function makePerson(name, age){
    this.name = name;
    this.age = age;
}
var xiaoming = new makePerson("Xiaoming", 10);
makePerson.prototype.getIntro = function(){
    return "Name:" + this.name + " Age:" + this.age;
};
console.log(xiaoming.name, xiaoming.age); // "Xiaoming" 10
console.log(xiaoming.getIntro()); // "Name:Xiaoming Age:10"

这里是先构造了对象xiaoming，再为它的原型增长了新的方法。能够看到，xiaoming能够经过原型链调用到新定义的原型方法。

须要注意的是，若是直接令函数的prototype为新的对象，将不能影响到以前生成的继承者们——由于它们的[[Prototype]]中保存的是原来的prototype所指向的对象的引用。

4、参考

MDN ｜ 从新介绍JavaScript
MDN | Primitive
原型继承
MDN | 原型与渲染链