javascript基础语法知识

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」。

基础语法

知识点：

• 操作系统就是个应用程序
• 只要是应用程序都要占用物理内存
• 浏览器本身也是一个应用程序
• 浏览器本身只懂得解析HTML
• 调用浏览器这个应用程序的一个功能绘制

  1、javascript介绍

• JavaScript操作DOM的本质是=获取+触发+改变

• 目的：就是用来操作内存中的DOM节点

  • 修改DOM节点的属性
  • 过javascript语法组织逻辑代码操作DOM
  • BOM(window)它包含了DOM
  • DOM(document)
  • script脚本推荐放在最下边好处：防止因网络问题，页面加载时间长，出现空白；即便网络问题，浏览器也把DOM加载渲染完成，等待从服务端下载完js脚本，出现效果
  • css不放在最下面原因通俗地讲：好比先穿好衣服在出去，浏览器先把css样式准备好，在加载结构层，使得页面有样子；如果放在下面，因为页面是从上往下加载，没有css，就剩下裸露的标签，很难看，使得用户体验不好

2、基于对象的内存管理

• javascript就是来操作这些对象
  • 通过逻辑组织对象之间的关系和行为
  • 如何操作这些对象？通过变量引用

3、变量

• 变量本质是一个空盒子，里面记录了一个内存地址，使能找到内存中的对象，保存了指向具体的实在的东西的地址
• 变量存在栈中，对象存在堆中
• 变量的意义：方便我们去操作对象
• 变量的几种引用方式
  • 指针（C语言中叫法）
  • 引用（Java）
  • 变量
• 例如：
  • var b = document.body 含义：把body这个对象在内存中的地址放到b变量里面，变量b（b是内存地址的别名）本身也存在内存中，以后的操作是针对body这个地址

• 变量命名规范
  • 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
  • 不能由数字开头
  • 命名尽量用英文并且具有一定的含义
  • 如果有多个英文单词,后面单词的首字母大写
  • 不能使用关键字
  • 首字母不要大写，大写是有特殊含义的

1、window作用域

• 只要在script标签中定义的变量，默认就在window的作用域之下
• 默认就是window这个对象里面写代码

2、数据类型

如何判断js中的数据类型：

• typeof、instanceof、 constructor、 prototype方法比较

• 如何判断js中的类型呢，先举几个例子：

1
2
3
4
5
6

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

最常见的判断方法：typeof

1
2
3
4
5
6

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function

• 其中typeof返回的类型都是字符串形式，需注意，例如：

1
2

alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false

• 另外typeof可以判断function的类型；在判断除Object类型的对象时比较方便。

判断已知对象类型的方法：instanceof

1
2
3
4

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false

• 注意：instanceof后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

根据对象的constructor判断：constructor

1
2
3

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true

• 注意： constructor 在类继承时会出错

• 例子：

1
2
3
4
5
6

function A(){};
function B(){};
A.prototype = new B(); //A继承自B
var aObj = new A();
alert(aobj.constructor === B) -----------> true;
alert(aobj.constructor === A) -----------> false;

• 而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：

1
2

alert(aobj instanceof B) ----------------> true;
alert(aobj instanceof B) ----------------> true;

• 言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：

1
2
3

aobj.constructor = A; //将自己的类赋值给对象的constructor属性
alert(aobj.constructor === A) -----------> true;
alert(aobj.constructor === B) -----------> false; //基类不会报true了;

通用但很繁琐的方法： prototype

1
2
3
4
5
6

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

• 大小写不能写错，比较麻烦，但胜在通用。
• 通常情况下用typeof判断就可以了，遇到预知Object类型的情况可以选用instanceof或constructor方法

Javascript的数据类型有六种（ES6新增了第七种Symbol）

• 数值（number）：整数和小数（比如1和3.14）
• 字符串（string）：字符组成的文本（比如”Hello World”）
• 布尔值（boolean）：true（真）和false（假）两个特定值
• undefined：表示 未定义 或不存在，即此处目前没有任何值
• null：表示空缺，即此处应该有一个值，但目前为空
• 对象（object）：各种值组成的集合
• 通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值

内存中一共分为几种对象：

• 变量
• DOM对象
• 常量
• 自定义对象