你不知道的javaScript笔记(1)

规避冲突

function foo(){

function bar(a){

i = 3;

console.log(a + i);

}

for ( var i=0; i < 10; i++){

bar(i * 2)

}

}

// 11无限死循环

区分函数声明和函数表达式最简单的方法是看 function 关键字出现的位置,如果function是声明中的第一个词,那么是函数声明,否则是函数表达式。

(function foo(){})() 立即执行的函数表达式

IIFE 立即执行函数表达式

var a = 2;

(function IIFE(global){

var a = 3;

console.log(a); // 3

console.log(global.a) // 2

})(window)

console.log( a)  // 2

将window 对象的引用传递进去,当然可以从外部作用域传入进任何你需要的东西,

并可以将变量命名为任何你觉得合适名字。

var a = 2;

(function IIFE(def) {

def(window)

})(function def(global) {

var a = 3;

console.log(a); // 3

    console.log(global.a) //2

});

函数表达式def 定义在片段的第二部分,然后当做参数被传递进IIFE 函数定义的第一部分中。最后def也就是传递进去的函数被调用,并将window 传入当做global参数的值。

try/catch 的catch 分句会创建一个块级 作用域,其中声明的变量仅在catch内部有效

例如:try{

undefinde();

}catch (err){

console,log(err); // 能够正常使用

  }

  console.log(err)  // ReferenceError: err not found

let 块作用域

var foo = true;

if(foo){

let bar = foo *2;

bar  = something(bar);

console.log(bar);

}

console.log(bar); // ReferenceError

变量提升,先有声明后又赋值。

foo();

function foo(){

console.log(a); // undefinded

var a = 2;

}

原因:相当于以下

function foo(){

var  a;

console.log(a); // undefined

a = 2;

}

foo();

注意: 函数声明会被提升,函数表达式不会被声明。函数和变量都会被提升,但是函数会被提前提升,然后是变量。

foo();   //1

var foo;

function foo(){

console.log(1);

}

foo = function() {

console.log(2)

}

  const  常量

后面的函数声明会覆盖前面的

foo(); // 3

function foo(){

console.log(1);

}

var foo = function() {

console.log(2);

}

function foo(){

console.log(3);

}

var a = 2 ; 的解析原则是  var  a 和  a = 2  当做两个单独的声明,第一个是编译阶段的

任务,第二个是执行阶段的任务。

闭包

function foo() {

var a = 2;

function bar(){

console.log(a);

}

return bar;

}

var baz = foo();

baz(); // 2

var fn;

function foo() {

var a  = 2;

function baz() {

console.log(a)

}

bar(baz);

}

function bar(fn){

fn();

}

for(var i = 1; i<=5; i++){

(function(j){

setTimeout(function(){

console.log(j)

},j*1000)

})(i)

}

在迭代器内部使用IIFE会为每一个迭代都生成一个新的作用域。

块作用域和闭包联手

for(var i = 1; i <= 5; i++){

setTimeout(function timer(){

console.log(i)

},i*1000)

}

模块

function  CoolModule(){

var  something = "cool";

var another = [1,2,3];

function doSomething() {

console.log(something);

}

function doAnoth(){

console.log(another.join("!"));

}

return {

doSomething: doSomething,

doAnother: doAnother

};

}

var  foo = CoolModule();

foo.doSomething(); //cool

foo.doAnother() // 1!2!3

改为单例模式:

var foo = (function CoolModule(){

var something = "cool";

var another = [1,2,3];

function doSomething() {

console.log(something)

}

function doAnother(){

console.log(another.join("!"))

}

return {

doSomething: doSomething,

doAnother: doAnother

}

})();

foo.doSomething(); // cool

foo.doAnother(); //1!2!3

时间: 2024-12-15 09:23:48

你不知道的javaScript笔记(1)的相关文章

你不知道的javaScript笔记(6)

语法 语句表达式 句子是完整表达某个意思的一组词,由一个或多个短语组成,他们之间由标点符号或者连接词连接起来. 语句相当于句子,表达式相当于短语,运算符则相当于标点符号和连接词. JavaScript 中表达式可以返回一个结果值. var a = 3 * 6; var b = a; b; var a = 3 * 6;   var b = a; 声明语句,因为它声明了语句 a = 3 * 6;   b = a;   表达式语句  语句的结果值 表达式的副作用 var   a =  42;  var

你不知道的javaScript笔记(4)

类型: JavaScript 有7种内置类型 空值 (null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象(object) 符号(symbol) 除对象以外,其他统称为“基本类型” 用typeof 运算符来查看值的类型 typeof undefined  === "undefined";   // true typeof true === "boolean";  // true typeof 42 =

你不知道的javaScript笔记(2)

this和对象原型 this是一个很特别的关键字,被自动定义在所有函数的作用域中 // foo.count 是0,字面理解是错误的 function foo(num) { console.log("foo:"+ num); this.count++; } foo.count = 0; var i; for(i=0;i<10;i++){ if(i>5){ foo(i) } } console.log(foo.count)  //0 // 使用词法作用域解决问题 functio

你不知道的Javascript(上卷)读书笔记之一 ---- 作用域

你不知道的Javascript(上卷)这本书在我看来是一本还不错的书籍,这本书用比较简洁的语言来描述Js的那些"坑",在这里写一些博客记录一下笔记以便消化吸收. 1 编译原理 在此书中,开始便提出:Javascript是一门编译型语言,我一开始以为这是国内翻译的锅,翻译的不够准确,后来我还专门去github看了,作者确实是将Js描述为一门编译型语言(compiled language).然而我认为作者更想表达的是Js也拥有和Java一般的特定的编译过程.而不是传统得认为只是单纯的进行&

你不知道的javascript(上卷卷)笔记

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>你不知道的javascript(上卷)</title> </head> <body> </body> </html>

你不知道的javascript(中卷)笔记

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>你不知道的javascript(中卷)</title> </head> <body> <script type="text/javascript"> /* //封装对象包装 var a = new Boolean(false); if(!a)

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

javascript笔记(二)

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc concat() 方法的结果等同于:result = s1 + s2 + ... + sN.如果有不是字符串的参数,则它们在连接之前将首先被转换为字符串. 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 va

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数