《你不知道的Javascript-上册》阅读笔记

第一部分  作用域和闭包

第三章

 1.

{
    console.log( bar ); //Error
    let bar = 2;
}

说明1. let 函数没有变量提升这个说法, 

       2. 在大括号内就能产生块作用域

第四章

1.

foo(); //error
{
function foo() {console.log("b")}
}

说明函数的提升只在自己的块级作用域有效

console.log(a) //undefined 注意不是error
{
var a;
}

说明var的声明提升可以在子级的块级作用域有效

2.

JavaScript中的作用域就是词法作用域

function foo() {
  console.log(a); //2
}
function bar() {
  var a = 3;
  foo();
}
var a = 2;
bar();

3.

var fun = function foo() {console.log("b")}
fun();  //b
foo(); // error

说明同时使用2个变量命名的函数,会忽略后面一个

第二部分 this解析

当判断this的真实对象时,需要应用下面四条规则中的其中一条:

  1. 默认绑定

     this 一般指向全局对象,严格模式是undefined

      function foo(){
            console.log(this.a);  //use strict 只对当前块级作用域有效,所以这里不是undefined
     }
    var a = 2;
    
    (function(){
        "use strict";
        foo();//2
    })();

    foo() 是直接使用不带任何修饰的函数进行调用的,因此属于默认绑定

    2.隐式绑定

    obj.foo()  //类似这种有上下文调用的

    3.显示调用

     call,apply,bind

    4. new 一个实例

2. 

function foo() {
    console.log(this.a);
}
var a = 2;
foo.call( null );//2

如果call,apply,bind传入null,则应用默认绑定

3.

function foo()
{
    return (a)=> {
    console.log(this.a)
    }
}
 
var obj1 = {
    a:2
}
 
var obj2 = {
    a:3
}
 
var bar = foo.call(obj1);
bar.call(obj2); //2

foo()调用一次时,箭头函数中的this获得 obj1 , 由于箭头函数一旦获得this,就无法被修改,所以还是obj1

 第三章 对象

  1. 深度复制对象时,要注意循环引用的问题

第五章 原型

  1. 判断两个对象之间的关系,可以用

 b.isPrototypeOf( c );

2. 使用Class的一个缺点:

class C{
    constructor(){
        C.prototype.count++
        console.log("Hello:" + this.count);
    }
}
C.prototype.count = 0;
var c1 = new C();
//Hello:1
var c2 = new C();
//Hello:2
c1.count === 2;//trte
c1.count === c2.count;//true

这种方法问题是,它违背了class语法的本意。在实现中暴露了.prototype

如果使用 this.count++ 我们会发现 c1,c2上都创建了 .count属性,而且互相共享

《JavaScript高级程序设计》第二次阅读笔记

第二章

  1. <!CDATA[   javascriptCode  ]]>   在XHTML中javascript可以用这个标记保证内嵌的javascript代码能正常运行,因为XHTML标准比较严格,很多标签都不能被解析。

  2. defer和async标记都不能保证是在DOMContentLoading之前或之后执行,区别就只是保证顺序执行而已。

第三章

  1. 严格模式下,使用未定义的变量会导致错误。

  2. nul值表示一个空对象的指针,而这也是使用typeof操作符检测null值时返回“object”的原因

  3. 无论在什么情况下都没必要把一个变量的值显式地设置为undefined,但是对于null,只要在保存[对象]的变了还没有真正保存对象,就应该明确地然它保存为null值。

  4. undefined 和 null,没有任何属性和方法

   5.要把都一个值转换为字符串,可以用加号把它与一个字符串“xxx”加在一起

   6.并非所有浏览器的BOM与DOM都属于Object

   7.+操作符 会像Number()一样对这个值执行转换。-号同理,不过变成负数。

   8.do-while 循环的代码至少会执行一次。

   9.for(; ;){ doSomething(); } 无限循环

   10.通过for-in循环输出的属性名的顺序是不可预测的,具体先后顺序因浏览器而异。

   11.swicth{case xxx:} 在比较时是使用全等操作符 ===,所以10不等于“10”

   12. 标准模式下arguments与参数会相互同步,严格模式下不会同步。

标准模式下:
function add(a){
arguments[0] = 10;
console.log(a); //10
}
add(1);
严格模式下
function add(a){
        "use strict";
arguments[0] = 10;
console.log(a);//1
}
add(1);

第4章

  1. 给基本类型添加引用会被浏览器直接忽略,也不会报错。

   2.要检测一个变量是不是基本数据类型用typeof,typeof null 等于object。如果用instanceof操作符检测基本类型的值,则翻回false.

第5章

   1.对象的key只能用字符串作key

   2.数组的toString()方法会返回由数组中每一个值的字符串形式拼接逗号分隔而成的字符串。所以如果[{a:1},2] toString() 等于 [object Object],2

   3.concat()方法可以添加字符串,也可以添加数组。如:

    var colors = ["red","green","blue"];

    var colors2 = colors.concat("yellow",["black","brown"]);

    alert(colors);//red,green,blue

    alert(color2);//red,green,blue,yellow,black,brown

   4.Array的5个迭代方法,都是给定运行参数function(value,index,array){}

    1.every() //返回布尔值,每一项都是true的话,返回true

    2.filter() //将返回true的项组成新的素组

    3.forEach()//仅仅循环数组一次.没有返回值

    4.map()//将每一项的返回值组成新的数组

    5.some()//返回布尔值,其中一项返回true,则返回true

   5.关于函数是否能复制,目前只能想到eval 这种方法了 eval("var z = "+s1.toString());

   6.创建函数有一种新的思路

      var sum = function(num1, num2){

              return num1 + num2;

      }

    等于

继续阅读

jQuery源码分析 Sizzle引擎 – 词法解析

所以我们知道浏览器最终会将HTML文档(或者说页面)解析成一棵DOM树,如下代码将会翻译成以下的DOM树。

复制代码
<div id="text">
  <p>
     <input type="text" />
  </p>
  <div class="aaron">
     <input type="checkbox" name="readme" />
     <p>Sizzle</p>
  </div>
</div>
复制代码

如果想要操作到当中那个checkbox,我们需要有一种表述方式,使得通过这个表达式让浏览器知道我们是想要操作哪个DOM节点。 继续阅读

jQuery源码分析系列(02) core – 选择器

02.code – 选择器

打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器!

工欲善其事,必先利其器,所以先从正则入手

我们来分解一个表达式

// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
     rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

作者的解释呢很简单,一个简单的检测HTML字符串的表达式 继续阅读

jQuery源码分析系列(01)—-整体架构

jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、
例如:

$().find().css()
$().hide().html('....').hide().

从上面的写法上至少可以发现2个问题
1. jQuery对象的构建方式
2 .jQuery方法的调用方式
 
分析一:jQuery的无new构建
JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概念 继续阅读

javascript 设计模式 笔记

继承模式
function EditInPlaceArea(id, parent, value) {
EditInPlaceArea.superclass.constructor.call(this, id, parent, value);
};
extend(EditInPlaceArea, EditInPlaceField);
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
subClass 子类中重新定义prototype中的熟悉 就 继续阅读

JavaScript开发者常忽略或误用的七个基础知识点

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中七个基础知识点:
1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位
继续阅读

jQuery性能优化

1,总是从ID选择器开始继承
在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。
例如有一段HTML代码:

  1. <div id=”content”>
  2. <form method=”post” action=”#”><h2>交通信号灯</h2>
  3. <ul id=”traffic_light”>
  4. <li><input type=”radio” class=”on” name=”light” value=”red”/> 红色</li>
  5. <li><input type=”radio” class=”off” name=”light” value=”yellow”/> 黄色</li>
  6. <li><input type=”radio” class=”off” name=”light” value=”green”/> 绿色</li>
  7. </ul>
  8. <input class=”button” id=”traffic_button” type=”submit” val 继续阅读

只在需要的时候加载需要的 JavaScript

一年前我做了一个关于这个主题的演讲。我第一次关注这个技术是因为 @dhh发布的他们在 37signals使用的一些观点。我注意到他们 在模板视图里如何使用JavaScript,动态生成JavaScript这是它的关注点,这引起了我的思考。
与之前我们在前端加载全部javascript相比,为什么我们不加载最少量的JavaScript然后在用户界面需要的时候再加载额外的JavaScript代码呢?