javascript语言精髓笔记

javascript是一门浏览器语言,对于后台攻城湿们。则是这样对其定义的

1. js是一门前端语言,因为js通常是web中的view部分,用来渲染最终呈现给用户的页面。

2. js是一门弱类型语言和解释性语言,没有使用编译器(编译器会检查语法错误,同样性质的比如php,ruby,python等。当然,不能说完全没有编译过程,只是不是严格意义上的编译),因为编译的目的最终应该是生成可执行的代码,而不是中间结果。

本文将关注两个方面

1.js重要概念

2.js小tips  主要关注容易被忽略的小问题

1.js重要概念

1.1. 对象

var obj = {};

  上面的代码定义了一个对象。在以后的使用中,可以动态的给这个对象增加新的属性。

obj.SayNo = func (){
     return "no...";
};

obj.Name = "name";

  

javascript中,每个对象都连接到一个原型对象,并且可以从中继承属性,比如,所有通过上面方式定义的对象,默认都连接到Object.prototype。它是js的标配对象。原型通过prototype来获取,可以给原型增加方法,这样,所有由原型产生的对象又自动获取了该方法,比如,通过以下方式给string增加trim方法。

Function.prototype.method = function(name,func) {
      this.prototype[name] = func;
      return this;
}

String.method(‘trim‘,  function(){
    return this.replace(/^\s+|\s+$/g, ‘‘);
});

var str = "      sss    ";

str.trim();

  

  1.2. 函数

javascript中的函数就是对象,所以函数可以保存在变量,对象和数组中,函数可以作为参数被传递,也可以返回函数,而且,作为对象,也可以拥有方法。

函数有四种调用模式

1. 方法调用模式

2. 函数调用模式

3. 构造器调用模式

4. apply调用模式

函数在调用的时候会自动获得两个免费的参数,this和arguments。上述四种调用模式在如何初始化this上存在差异(其实就是坑)

  1. 方法调用模式,this被绑定到该对象上

var obj = {
   name : "hello kitty",
   SayHello : function(){
         return "hello. i am " + this.name;
   },
};

obj.SayHello();

  2. 函数调用模式,this被绑定到全局对象(坑来了...)

var name = "name1";

var obj = {name:"name2"};

obj.tell = function(){
    var sayHello = function(){
          return this.name;
    };
    console.log(sayHello()); //输出是name1.因为this指代的是全局的this...
};

  解决方案

var name = "name1";

var obj = {name:"name2"};

obj.tell = function(){
    var that = this;
    var sayHello = function(){
          return that.name;
    };
    console.log(sayHello()); //输出是name2.因为that指代的是对象...
};

  3. 构造器调用模式

4. apply调用模式

    function Person(name,age){
        this.name=name;
        this.age=age;
    }

    function Student(name,age,grade){
        Person.apply(this,arguments); //apply模式  // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
        this.grade=grade;
    }

    var student=new Student("qian",21,"一年级");  //构造器

    console.log(student.name);
    console.log(student.age);
    console.log(student.grade);

  其实还有一种调用方式(call),如下(跟apply类似)

function Animal(){
    this.name = "Animal";
    this.showName = function(){
        alert(this.name);
    }
}  

function Cat(){
    this.name = "Cat";
}  

var animal = new Animal();
var cat = new Cat();  

animal.showName.call(cat,",");

  上述方式,把cat用animal的this替换了,所以,输出是cat.

    比如,在设置时间监听时,可以使用call来完成

       addEventHandler: function(obj,eventName,fun,param) {
            var fn = fun;
            if(param){
                fn = function(e){
                    fun.call(this, param);
                }
            }
            if(obj.attachEvent){
                obj.attachEvent(‘on‘+eventName,fn);
            }else if(obj.addEventListener){
                obj.addEventListener(eventName,fn,false);
            }else{
                obj["on" + eventName] = fn;
            }
        },

  

1.3 js的同缘策略

js为了安全考虑,采取了同源策略。要求两个同源的js才能互相操作dom。

1. 这里的同源(协议,域名,端口三者必须一致),指定的是页面的同源,而不是js。因为页面可以任意引用其他域名下的js(因为是主动包括,所以都实际上都属于同一个源的js,比如很多页面会加入百度广告的js,或者谷歌统计的js等。这些js是可以直接对页面的dom进行操作的)。更具体来说,就是JS只能与同一个域中的页面进行通讯.如:运行在 http://www.cnblogs.com/weijiaen/page.html上的脚本不能和http://www.cnblogs.com/weijiaen2/page.html的浏览器窗口或iframe 进行交互.不能访问它的cookie,接收它的HTTP响应等(但它可以向任何其他源发送HTTP请求,浏览器会阻止它读写响应);AJAX 和 webservice 也受此策略管束.

2. 同源策略的一个解决方式(让一个页面能访问另外一个域的接口)就是jsonp。jsonp其实是利用页面可以使用<script>任意引用其他域名的js(必须是可执行js段,比如var arr=[1,2,3]而不是一个数据,比如{a:[1,2,3]}),然后通过注册函数(这又是函数的一大用处),然后从另外一个域返回函数(参数为数据{}),这样就可以对返回的数据进行处理,jsonp只是一个技术而不是一个标准的协议

当一个页面尝试包含其他页面(比如百度广告会在你的页面中包括百度域下的一个页面),并且尝试让两个页面进行通信的时候,会遇到同源策略限制的问题。但是可以通过主页面改变url中的hash值(改变iframe的src中的hash,并不会引起页面刷新)的方式(在子页面中监听hash参数的变化)进行通信。

2. js小tips

2.1. 对象通过引用来传递,永远不会被复制

2.2. 直接使用未经声明的变量,会产生隐式全局变量,这会导致bug查找非常困难

2.3. JavaScript只有函数作用域,没有块级作用域,在函数内部任何地方定义的变量,在函数内部任何地方可见(比如在一个for循环定义的变量在另外一个for循环可见)。

2.4. 一个函数总是会返回值,不指定返回值,则返回undefined. 如果在函数调用前加上了new,则返回this。如果我们想办法让函数返回是this,则可以启用级联。作用类似c++的cout。

    比如,getElementById返回的就是一个this指针

    

2.5. 如何正确的生成动态script标签,并执行

	div_content = [
        ‘(function() {‘,
        //some code string here...
        ‘ })()‘].join(‘‘);

	var script_div = document.createElement("SCRIPT");
	script_div.innerHTML = div_content;
	script_div.type = "text/javascript";

        target_div=document.getElementById(‘yourid‘);
	target_div.appendChild(script_div);

 2.6. css之定位

css定位分绝对定位(absolute,fixed),相对定位(relative)

    absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。在没有设定上面四种属性时,默认依据父级的做标原始点为原始点。如果设定并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由设定值决定。

    比如,如果不设置父节点为relative。效果如下图

如果设置了父节点为relative。效果如下图

    ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

时间: 2024-10-06 07:24:04

javascript语言精髓笔记的相关文章

试读《JavaScript语言精髓与编程实践》

有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖励并不大,依靠纯粹的物质奖励,很显然,不会强烈的促使我去读这本书.而原因在于,一方面对javascript的极大兴趣,另一方面之前已经拜读过如<javascript高级程序设计><高性能javascript><javascript设计模式>等书,那我就有了要看看这本书都写了

javascript语言精粹----笔记【转载】

javascript语言精粹----笔记 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'number','string','boolean','undefined','function','object';其中typeof(null),结果是'object' 3.number类型总是64位浮点数,两个整数相除也可能出现非整数结果 4.如果第一个运算数的值为假,那么运算符&&产生它的第一个运算数的值.

JavaScript语言精粹笔记

JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取其精华去其糟粕.当你知道要做什么的时候,它还能表现的更好,编程时一件相对困难的事情,绝不应该在懵懂的状态下开始编程之旅. JS中的注意为//或者/*content*/,注释一定要精确地描述代码,不然没有用的注释比没有注释更糟糕. JS中的代码块不会创建新的作用域,因此变量应该被定义在函数的头部,而不

《javascript语言精髓》笔记

做B\S项目已有一年多,自己是做后台出来的,对写js方面可能也沿用了以前的思路,想想毕竟也是OO语言嘛.然而,从上个项目吃的一些苦头,让我决心静下心来把js的书看看.这本<javascript语言精粹>是别人推荐给我的,之所以选择这本书,是因为我深知代码质量的重要性(想想自己以前写的代码,真想回去重写),代码写的越多,我就越想用更简洁的代码来实现功能,而这当然需要更深入的取理解一下js的设计模式和原理性的东西.很多人说js简单,是因为对这门语言不是很了解,也可以用它来工作,觉得就是一般的OO语

javascript 语言精粹 笔记推荐。。

http://www.cnblogs.com/Cohlint/archive/2012/11/26/2788790.html 这篇javascript 语言精粹 学习笔记不错..不过看上去就是读书笔记,没有深入研究某个点..比如闭包..我还是不懂噢.. 比如17条:“add_the_handles 函数目的是给每个时间处理器一个唯一值(i).它未能达到目的是因为事件处理器函数绑定了变量i,而不是函数在构造时的变量i的值.” 这是原书的翻译过来的理解,但是感觉还是很艰涩,不太理解. 闭包这个变量作

JavaScript语言精粹 笔记01

内容比较简单,只是从头梳理一下JS的知识 语法空白标识符数字字符串语句 对象对象字面量检索更新引用原型反射枚举删除减少全局变量污染  语法 1 空白 空白可能表现为格式化字符或注释的形式.空白通常没有意义,但是偶尔必须用它来分割字符序列,否则它们就会被合并成一个单一的符号.例如: var that = this; var 和that之间的空格是不能去掉的,其他的空格都可以被移除. JS提供两种注释: /* */ // 建议使用//,因为/* */中要注释的内容可能包括字符 */ 而报错,例如:

JavaScript语言精粹 笔记03

继承伪类对象说明符原型函数化部件 继承 JS不是基于类的,而是基于原型的,这意味着对象直接从其他对象继承. 1 伪类 JS提供了一套丰富的代码重用模式,它可以模拟那些基于类的模式,因为JS实际上没有类,所以把模拟的类称为伪类.我们可以定义一个构造器并扩充它的原型: var Mammal = function (name) { this.name = name; }; Mammal.prototype.get_name = function ( ) { return this.name; }; M

JavaScript语言精粹 笔记02

函数函数对象函数字面量调用参数返回异常给类型增加方法递归作用域闭包回调模块级联套用记忆   函数 1 函数对象 在JS中函数就是对象.对象是“名/值”对的集合并拥有一个连接到原型对象的隐藏连接.对象字面量产生的对象连接到Object.prototype.函数对象连接到Function.prototype(该原型本身连接到Object.prototype).每个函数在创建时附有两个附加的隐藏属性:函数上下文和实现函数行为的代码. 因为函数是对象,所以它可以像任何其他的值一样被使用.函数可以存放在变

JavaScript语言精粹 笔记06 方法

JS包含了少量可用在标准类型上的标准方法. ArrayFunctionNumberObjectRegExpString Array array.concat(item...) concat方法返回一个新数组,它包含array的浅复制并将1个或多个参数item附加在其后.如果参数item是一个数组,那么他的每个元素会被本别添加. var a = ['a', 'b', 'c']; var b = ['x', 'y', 'z']; var c = a.concat(b, true); // c 是 [