犀牛书 & JavaScript Web Applications notes

https://www.evernote.com/shard/s20/sh/83c1aced-abdf-4866-a6a1-8f247815b5c2/eec821d6a4fb9940ff7deea4c190d713

 

 

 

 

数字类型是浮点型

 

常规数组用 数字 做下标

 

关联数组用 字符串 做下标

 

 

 

image.width  也可以  image["width"]

 

 //第2种方法[]里面是个字符串  这个就有很大的灵活性  因为可以放一个字符串变量  在运行时决定真正要读的属性

 

 //字符串是动态的  属性标示符是静态的

 

 //第2种方法把对象叫关联数组 实际在js内部是用关联数组实现对象的

 

 

 

var a =  new Array();

 

a[0] = 1.2;

 

a[1] = true;

 

//数组可变长度?

 

 

 

 

 

 

 

 

 

对基本类型的自动包装   Number  String Boolean

 

 

 

js函数体代码执行时会首先扫描所有变量定义  然后才处理代码逻辑

 

var scope = "global";

 

function f(){

 

     alert(scope);    //显示undefined  因为首先扫描到局部定义   把全局的屏蔽了  但此时赋值的代码又未执行

 

     var scope = "local";

 

     alert(scope);

 

}

 

 

 

in 运算符  

 

  左边的是一个字符串 右边的是一个对象或数组  如果左边的值是右边的一个属性名， 返回true

 

 "name"  in  {name:1,age:23}     // true

 

 

 

 

 

instanceof 运算符

 

  d instanceof Date  // 左边是对象   右边是类名

 

 

 

typeof 运算符

 

  返回 number  string  boolean  object   function  undefined

 

 

 

delete 运算符

 

  删除属性引用?

 

 

 

 

 

对象属性的枚举

 

for (var pname in myobject){

 

}  //pname 是属性名  myobject[pname] 是 属性值

 

 

 

 

 

函数定义在解析时发生，不是在运行时发生

 

 

 

with (object)

 

     statement  //把object 加到作用域链的头部

 

 

 

 

 

函数的实际参数  arguments[]对象

 

     调用函数时可以传超过定义的参数个数  然后访问arguments[]去获取

 

 

 

函数内参数 callee   

 

      //引用函数自身  可以方便的拿到未命名的函数引用

 

 

 

 

 

arguments.length 是实参的数目   Function.length 是形参的数目

 

     var actual = args.length;

 

     var expected = args.callee.length;

 

 

 

 

 

call()

 

     f.call(o,1,2);

 

     o.m = f;

 

     o.m(1,2);

 

     delete o.m;

 

 

 

apply() 和 call相似  只不过参数是数组    f.apply(o,[1,2]);

 

 

 

 //为什么要这样?

 

 //对象上的函数叫方法  方法和普通函数有一个区别  this关键字的指向  在方法中this指向对象    所以o.m=f后    如果f中有代码this的话  这时this就指向o了

 

 //而普通函数中的this指向的是全局对象      this的指向是函数和方法的主要区别

 

 Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the funciton immediately, and modify the context.

Call/apply call the function immediately, whereas bind returns a function that when later executed will have the correct context set for calling the original function. This way you can maintain context in async callbacks, and events.

 

 

 

prototype

 

  原型对象   原型对象属性读的时候， 如果实例没有，就会去原型上读，（大大减少每个对象对内存的需求量）但如果写入的话，是会在实例上创建一个并写在实例上的，并以后读该属性都是在实例上读了

 

 

 

constructor  

 

     //指向构造函数   这个属性是从原型继承而来 即此属性在原型上 假如原型被替换成其他对象  那个对象不一定有constructor属性

 

     var o = new Complex(1,2);

 

     o.constructor == Complex  // true

 

     f.prototype.constructor == f //true

 

 

 

hasOwnProperty()

 

 判断一个属性是否挂在对象本身上的 挂在原型上是false  假如找不到也是false    o.hasOwnProperty("name")

 

 

 

isPrototypeOf()

 

     Object.prototype.isPrototypeOf(o)   //true

 

 

 

 

 

 

 

数组不过是一个具有额外功能层的对象

 

 

 

js数组是稀疏的 数组下标不会落在一个连续的数字范围内 

 

var c = new Circle();

 

c[0] = "xxxx";    //只是添加了一个名为0的属性  将数组元素添加到对象不会使他成为数组

 

 

 

数组的length总是比最大元素的下标多1  即使在稀疏的情况下

 

     length值可写  设置一个比实际小的数   数组会被截断 长度之外的元素会被抛弃

 

     一般的对象没有length属性  length属性成了数组最重要的特性

 

 

 

   join()  数组的元素转换成字符串，用逗号分隔符连起来 

 

     a = [1,2,3]   a.join() // "1,2,3"   a.join(",")  //"1, 2, 3" 后面的有空格

 

 

 

   reverse()   翻转整个数组

 

 

 

 

 

 

 

window == this // true  window就是顶级全局对象

 

document == window.document  //true

 

 

 

 

 

navigator 

 

     包含web浏览器的总体信息   // for(var p in navigator) document.write(p+":"+navigator[p]+"<br>");

 

 

 

document

 

     //for(var p in document) document.write(p+":"+document[p]+"<br>");

 

 

 

 

 

cookie

 

     name=value;path=path;domain=domain;expires=expires;secure=secure;

 

 

 

     expires 生存周期

 

     path  cookie可见性 只对path的同一目录或子目录的页面可见

 

     domain  跨域 访问   不能将一个cookies域设置成服务器所在的域之外的域

 

     secure   是否只在https时才传输cookies

 

     不能有分号  逗号  空白符  所以存时要escape() 读的时候unescape()

 

 

 

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->

 

// Static functions are added directly on the class

Person.find = function(id){ /* ... */ };

 

 

// Instance functions are on the prototype

Person.prototype.save = function(){ /* ... */ };    //用这种方法添加实例方法只会创建方法一次

 

//下面这种每次new Person的时候都会创建一次add方法

function Person(){

    this.add = function () {

      …...

    }

}

 

 

 

 

 

 

event

     type //click   mouseover

     target 发生事件的节点

     currentTarget  传播到的节点

     timeStamp  何时发生

     bubbles 是否在文档树起泡

     stopPropagation()  阻止传播

 

     事件传播的顺序有2种

1.         Netscape 4 supported event capturing , which triggers event listeners from the top-most ancestor to the element in question—i.e., from the outside in.
2.         Microsoft endorsed event bubbling , which triggers event listeners from the element, propagating up through its ancestors—i.e., from the inside out.
3. Event bubbling makes more sense to me, and it is likely to be the model used in day-to-day development. The W3C compromised and stipulated support for both event models in their specification. Events conforming to the W3C model are first captured until they reach the target element; then, they bubble up again.
4. You can choose the type of event handler you want to register, capturing or bubbling, which is where the useCapture argument to addEventListener() comes into the picture. If the last argument to addEventListener() is true, the event handler is set for the capturing phase; if it is false, the event handler is set for the bubbling phase

 

 

 

 

 

 

CORS  允许跨域

 

CORS lets you break out of the same origin policy, giving you access to authorized remote servers. The specification is well supported by the major browsers, so unless you’re using IE6, you should be fine.

CORS support by browser:

IE >= 8 (with caveats)

Firefox >= 3

Safari: full support

Chrome: full support

Opera: no support

Using CORS is trivially easy. If you want to authorize access to your server, just add a few lines to the HTTP header of returned responses:

Access-Control-Allow-Origin: example.com

Access-Control-Request-Method: GET,POST