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

  • A+
所属分类：Web前端
摘要

这篇笔记中有什么：✔️JavaScript的极简介绍
✔️JavaScript中数据类型的简单梳理
✔️JavaScript中的面向对象原理
便宜好用的国外VPS推荐

这篇笔记中有什么：

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

这篇笔记中没有什么：

❌JavaScript的具体语法
❌JavaScript通过各种内置对象实现的其他特性

一、概览

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

二、数据类型

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）。
目前看到的相似点比较多，差异性有待进一步比较。

三、面向对象

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所指向的对象的引用。

四、参考

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

便宜好用的国外VPS推荐