JavaScript基础

JavaScript基础

html：描述网页内容；
css：描述网页样式；
javascript：描述网页行为。

作用域：

在 JavaScript 函数中声明的变量为函数的局部变量。

函数之外声明的变量为全局变量。全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

自动全局：如果对没有声明的变量赋值，此变量会自动成为全局变量（或不通过关键词 var 创建的变量总是全局的，即使在函数中创建）。如：

myFunction();
// 此处的代码能够使用 carName 变量
function myFunction() {
    carName = "porsche";
}

这段代码在函数内对一个没有声明的变量 carName 进行了赋值，所以 carName 是全局变量。

在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。

参考： https://blog.csdn.net/qq_36276528/article/details/70049825
https://blog.csdn.net/cauchy6317/article/details/81167572

声明提升（Hoisting）

提升（Hoisting）是将变量或函数的声明移至代码顶部的行为。即变量或函数可以在其声明之前或之后使用。

x = 5; // 把 5 赋值给 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x

JavaScript 只提升声明，对于变量的初始化不会提升。

var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;       // 显示 x为5、y为undefined
var y = 7; // 初始化 y 

数据类型

原始值：指的是没有属性或方法的值。原始值是一成不变的（它们是硬编码的，因此不能改变）。如 x = 3.14，能够改变 x 的值，但是无法改变 3.14 的值。

原始数据类型：指的是拥有原始值的数据。

通过 var 关键词来声明 JavaScript 变量。

5种原始数据类型：

javascript有 5 种原始数据类型（primitive type），也称为基本数据类型。即 Undefined、Null、Boolean、Number 和 String。

typeof 运算符用于返回数据类型：

typeof "Bill"            // 返回 "string"
typeof 3.14              // 返回 "number"
typeof true              // 返回 "boolean"
typeof null              // 返回 "object"
typeof x                 // 返回 "undefined" (定义 x 没有赋值)

typeof 运算符对于 null 值会返回 "object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false (类型不相等)
null == undefined             // true (值相等)

两种复杂数据类型：
object与function。所有对象都是继承了object对象。

typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object，而是function。

typeof {name:'Bill', age:62}  // 返回 "object"
typeof [1,2,3,4]              // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                   // 返回 "object"
typeof function myFunc(){}    // 返回 "function"

函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名、放置参数的括号 ()，放置函数执行代码的花括号中{}。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

name 引用的是函数对象，而 name() 才是调用函数，引用的是函数结果。

Function() 构造器：
定义函数对象除了用function，还可以使用内置的函数构造器来创建函数。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

匿名函数（没有名称的函数）。存放在变量中的函数不需要函数名，直接使用变量名调用。

var x = function (a, b) {return a * b};
var z = x(4, 3);

函数调用：

• 当事件发生时调用（当用户点击按钮时）
• 当编写 JavaScript 代码时调用
• 自动的（自调用）

自调用函数：
自调用函数是指函数被自动调用，而不要人为通过代码调用。格式：

(函数表达式)();  		// 代码执行到这会自动调用该函数。

(function () {
    var x = "Hello!!";      
})();

函数形式调用函数：

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2); 

以上函数不属于任何对象。但是在 JavaScript 中，始终存在一种默认的全局对象。

在 HTML 中，默认全局对象是 HTML 页面本身，所有上面的函数属于HTML 页面。

在浏览器中，这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。即 myFunction() 和 window.myFunction() 是同一个函数。

对象

对象是包含变量的变量，对象也是变量。但是对象能够包含很多值。

JavaScript 对象用花括号来书写。对象属性是 name:value对，由逗号分隔属性。

对象属性可以是原始值、其他对象以及函数。
对象方法是包含函数定义的对象属性。

创建对象的不同方法：

1. 定义和创建单个对象，使用对象文字。对象文字指的是花括号 {} 中的名称:值对（比如 age:62）。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

2. 定义和创建单个对象，通过关键词 new。

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue"; 

3. 定义对象构造器，然后通过构造器创建对象。
4. 在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象。

访问 JavaScript 对象属性：
访问对象属性的语法是：

objectName.property           // person.age

或者：

objectName["property"]       // person["age"]

或者：

objectName[expression]       // x = "age"; person[x]

表达式必须为属性名。

JavaScript 对象方法：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 648,
  fullName : function() {   // 对象方法
    return this.firstName + " " + this.lastName;
  }
};

访问对象方法：

objectName.methodName()  		// person.fullName()

一般把 fullName() 描述为 person 对象的方法，把只有方法名fullName 描述为对象的属性。

调用对象方法时一定要加()。访问 fullName 属性时没有使用 ()，则将返回函数定义：

name = person.fullName;		// 没加()，返回 function() { return this.firstName + " " + this.lastName; }

JavaScript 对象构造器：

// Person 对象的构造器函数
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");

给对象添加新属性或新方法，这些新增加的属性或新方法只在当前对象中存在。

myFriend.nationality = "English";
myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

无法通过上述方式直接为对象构造器添加新属性或新方法；需向构造器添加一个新属性或新方法，必须添加到构造器函数中。

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";  // 添加新属性
    this.name = function() {return this.firstName + " " + this.lastName;};  // 添加新方法
}

原型继承
所有 JavaScript 对象都从原型继承属性和方法。

如：日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自Person.prototype。日期对象、数组对象和 Person 对象都继承自 Object.prototype。

Object.prototype 位于原型继承链的顶端。

使用 prototype 属性：
JavaScript prototype 属性允许直接为对象构造器添加新属性或新方法，而不需要向前面那样在构造函数中添加。为对象构造器添加新属性或新方法，以后每次创建一个该对象都会有对应的新属性或新方法。

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";  // 给构造函数添加属性
Person.prototype.name = function() {  // 给构造函数添加方法
    return this.firstName + " " + this.lastName;
};
// 创建对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 访问对象新属性
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriend.nationality; 
// 调用对象新方法
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();