目录
- 一、概览
- 二、数据类型
- 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的比较
- 三、面向对象
- 1. 意义
- 2. 原型与继承
- 3. 自定义对象
- 如何创建类似对象
- 构造器和new
- 构造器的prototype属性
- 四、参考
这篇笔记中有什么:
️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"
。
- Null类型只有一个值:
- 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中也有)
- 因此,可以将函数理解为,一种附加了可被调用功能的普通对象。
- 每个JavaScript函数实际上都是一个
- 数组 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 | 原型与渲染链