JavaScript语言精粹经典实例(整理篇)

JavaScript 是 弱类型 语言,但并不是没有类型,JavaScript可以识别下面 7 种不同类型的值:

基本数据类型

1.Boolean

2.Number

3.String

4.null

5.undefined

6.Symbol

Object

1.Array

2.RegExp

3.Date

4.Math

5....

可以使用 typeof 判断数据类型,操作符返回一个字符串,但并非返回的所有结果都符合预期

typeof false // "boolean" typeof .2 // "number" typeof NaN // "number" typeof '' // "string" typeof undefined // "undefined" typeof Symbol() // "symbol" typeof new Date() // "object" typeof [] // "object" typeof alert // "function" typeof null // "object" typeof not_defined_var // "undefined"

变量

在应用程序中,使用变量来来为值命名。变量的名称称为 identifiers

声明

1.使用关键字 var :函数作用域

2.使用关键字 let :块作用域 (block scope local variable)

3.直接使用:全局作用域

var global_var = 1; function fn () { var fn_var = 2; if(fn_var > 10){ let block_var = 3; global_var2 = 4; } }

只声明不赋值,变量的默认值是 undefined

const 关键字可以声明不可变变量,同样为块作用域。对不可变的理解在对象上的理解需要注意

const num = 1; const obj = { prop: 'value' }; num = 2; // Uncaught TypeError: Assignment to constant variable. obj['prop'] = 'value2'; obj = []; // Uncaught TypeError: Assignment to constant variable.

变量提升

JavaScript中可以引用稍后声明的变量,而不会引发异,这一概念称为变量声明提升(hoisting)

console.log(a); // undefined var a = 2;

等同于

var a; console.log(a); a = 2;

函数

一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的 子程序

定义函数

1.函数声明

2.函数表达式

3.Function 构造函数

4.箭头函数

function fn(){} var fn = function(){} var fn = new Function(arg1, arg2, ... argN, funcBody) var fn = (param) => {}

arguments

1.arguments: 一个包含了传递给当前执行函数参数的类似于数组的对象

2.arguments.length: 传给函数的参数的数目

3.arguments.caller: 调用当前执行函数的函数

4.arguments.callee: 当前正在执行的函数

function foo() { return arguments; } foo(1, 2, 3); // Arguments[3] // { "0": 1, "1": 2, "2": 3 }

rest

function foo(...args) { return args; } foo(1, 2, 3); // Array[3] // [1, 2, 3] function fn(a, b, ...args){ return args; } fn(1, 2, 3, 4, 5); // Array[3] // [3, 4, 5]

default

函数的参数可以在定义的时候约定默认值

function fn (a = 2, b = 3) { return a + b; } fn(2, 3); // 5 fn(2); // 5 fn(); // 5

对象

JavaScript 中对象是可变 键控集合 (keyed collections)

定义对象

1.字面量

2.构造函数

var obj = { prop: 'value', fn: function(){} }; var date = new Date();

构造函数

构造函数和普通函数并没有区别,使用 new 关键字调用就是构造函数,使用构造函数可以 实例化 一个对象

函数的返回值有两种可能

1.显式调用 return 返回 return 后表达式的求值

2.没有调用 return 返回 undefined

function People(name, age) { this.name = name; this.age = age; } var people = new People('Byron', 26);

构造函数返回值

1.没有返回值

2.简单数据类型

3.对象类型

前两种情况构造函数返回构造对象的实例,实例化对象正是利用的这个特性

第三种构造函数和普通函数表现一致,返回 return 后表达式的结果

prototype

1.每个函数都有一个 prototype 的对象属性,对象内有一个 constructor 属性,默认指向函数本身

2.每个对象都有一个 __proto__ 的属性,属相指向其父类型的 prototype

function Person(name) { this.name = name; } Person.prototype.print = function () { console.log(this.name); }; var p1 = new Person('Byron'); var p2 = new Person('Casper'); p1.print(); p2.print();

this 和作用域

作用域可以通俗的理解

1.我是谁

2.我有哪些马仔

其中我是谁的回答就是 this

马仔就是我的局部变量

this 场景

普通函数

1.严格模式:undefined

2.非严格模式: 全局对象

3.Node: global

4.浏览器: window

构造函数:对象的实例

对象方法:对象本身

call & apply

1.fn.call(context, arg1, arg2, …, argn)

2.fn.apply(context, args)

function isNumber(obj) { return Object.prototype.toString.call(obj) === '[object Number]'; }

Function.prototype.bind

bind 返回一个新函数,函数的作用域为 bind 参数

function fn() { this.i = 0; setInterval(function () { console.log(this.i++); }.bind(this), 500) } fn(); () => {}

箭头函数是 ES6 提供的新特性,是简写的 函数表达式,拥有词法作用域和 this 值

function fn() { this.i = 0; setInterval(() => { console.log(this.i++); }, 500) } fn();

继承

在 JavaScript 的场景,继承有两个目标,子类需要得到父类的:

1.对象的属性

2.对象的方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzspjx.html