JavaScript基础（二）

JS对象

// 创建对象
let obj = new Object();
let obj = {};
// 添加属性
obj.field = 'property';
let obj = { field: 'property'}
let obj = { ['field']: 'property'}
// 添加方法
obj.methid = function() {}
// 访问属性
obj['field'] = 'property';
//删除属性
delete obj.field;

// 添加变量属性
let filed = 'field';
let obj = { [field]: 'property'}
// 访问变量属性
obj[field] = 'property';

// symbol 作为属性名
let s = Symbol();
obj[s] = 'property';
obj[s]; // 'property'
let obj = { [s]: 'property'}

// 检查对象中是否含有某个字段
'field' in obj;
// 遍历对象属性
for(let f in obj) { console.log(f, obj[f]); }

JS函数

普通函数

// 函数声明：创建函数
function fn() {}

// 函数表达式：创建函数

const fn = function() {}
  
// 箭头函数：：创建函数
() => {}

// 创建带参数的函数，x,y 称为形式参数，但调用函数时传入的就是实际参数
function fn(x, y) {}
(x, y) => {}

// 指定形参默认值，当没有传实际参数时
function fn(x=1, y=2) {}

// 调用函数
fn();
fn(1, 2);

function fn(obj) {}
// 将对象作为参数，传递到函数中的是对象的内存地址
fn({}) {}

高阶函数

// 函数作为参数
const fn = function(x) {}
fn(()=>{});

立即执行函数

(function(){})();

JS全局/局部/函数作用域

• 全局作用域
  • 在网页打开时创建，关闭时销毁
  • 全局作用域的变量/对象/函数在任意位置都可访问
• 局部作用域
  • 在代码块执行创建，执行结束时销毁
  • 局部作用域内的变量叫做局部变量，局部变量只能在局部作用域内访问
• 函数作用域
  • 函数作用域也是一种局部作用域
  • 在函数调用时创建，执行结束时销毁
  • 函数中定义的变量是局部变量，局部变量只能在函数作用域内访问

JS作用域链

访问变量时，JS解释器按就近原则寻找，现在当前作用域寻找，没有则依次向上层寻找，直到全局作用域。

let a = 1;
{
  let a = 2;
  {
    let a = 3;
    console.log(a);
  }
}

JS window对象

浏览器提供了一个可以直接访问的window对象，window中存储了JS内置对象和宿主对象。
JS内置对象比如Number()，String()；
宿主对象如document，console，alter；
这些对象都可以通过window调用，如window.console.log()；
通过window添加的属性，是全局变量；
在全局作用域中声明的var变量和函数都会作为window的属性和方法；
没有任何声明直接赋值的变量，会直接称为window属性。

JS变量提升

通过var声明的变量会被JS解释器提升到所有代码前。
通过let声明的变量同样会被提升，但是会因为未赋值报错。
变量/函数提升主要是预先分配内存。

// 原代码
console.log(a); // undefined
var a = 10;

// js解释后的代码
var a; // 仅提升变量声明部分
console.log(a); // undefined
a = 10;

JS this

• 以函数形式调用时，this指向window
• 以方法形式调用时，this指向调用方法的对象
• 箭头函数没有this，它的this由外层this决定

// 以函数形式调用时，this指向window
// 示例一
function fn() {
  console.log(this);
}
fn(); // this -> window

// 示例二
const obj = {
  fn: function() {
    function x() {
      console.log(this);
    }
    x(); // 函数形式调用时，this指向window
  }
}
obj.fn(); // this -> window

// 以方法形式调用时，this指向调用方法的对象
const obj = {
  fn: function() {console.log(this);}
}
obj.fn(); // this -> obj

// 箭头函数没有this，它的this由外层的this决定
// 示例一
const fn = ()=> {console.log(this);}
fn(); // this -> window

// 示例二
const obj = {
  fn: ()=>{console.log(this);} // 外层是obj，obj的this是window
}
obj.fn(); // this -> window

// 示例三
const obj = {
  fn: function() {
    const x = ()=>{console.log(this);} // 外层是fn(),fn()的this是obj
    x();
  }
}
obj.fn(); // this -> obj

JS严格模式

"use strict"