Javacript 学习笔记

一.初探

javacript 学习无法是围绕着对象和属性两个方面来兜圈子,万变不离其宗。

在js中,能点出来的,或者中括号里面的必然是属性(方法)。数组除外。

对象调用属性!

对象调用属性!

对象调用属性!

整个js翻来覆去都在围绕这个事情做文章。

对象调用属性有两种方式:

1.直接点 window.onload 默认是null

2.window[onload] = window[null]=undefined

 

二.语言特点

是一个解释性语言,解释到哪里就执行到哪里,所以往往不会在一个地方等待,而是先把所有的代码执行完了在说。

比较灵活:

1.可以动态给对象添加属性,或者给属性赋值

2.只要你愿意,随时随地可以引入外部的js脚本,并且立即执行

 

三.回调函数

一句话概括:回调函数就是把一个函数当做参数,传入另一个函数中,传进去的目的仅仅是为了在某个时刻去执行它

函数必须打一个括号才能执行。

比如:

$(function(){ 

})
$( )

就是一个函数,打了括号,

function(){

}

就必须执行

真相:

var $ = function(callback){ 
     callback() 
}

egg:

var $ = function(id){
    return {
        element : document.getElementById(id) ,
        on : function(event,callback){
            this.element['on' + event] = callback;
        }
    }
}

如果js给dom添加一个点击事件,一般会这样写

dom.onclick = function(){

}

或

dom['onclick'] = function(){

}

调用egg:

window.onload = function(){
    $('box').on('click',function(){
        $('box').element.style.background = 'green';
    });
}

 

四.数组

三大特性:

1.一般编程语言数组的索引只能是数字,js数组中,它的索引可以是任意类型

2.它是动态的,扩容方便

3.可以放任何对象,也可以放函数,比如:arr[3]();

 

赋值:扩容赋值,也可以用push()

 

常用方法:push() pop() slice():复制

 

数组转字符串:ids.join(',')  //转换成逗号分隔的字符串

 

五.Json

一个轻量级的数据交换格式,是一系列键值对的集合,用逗号分隔

js对象转成json格式字符串:

var person = {'name' : 'Jack'}
alert(JSON.stringify(person));

 

json字符串转成js对象

console.log(JSON.parse("{\"name\":\"Jack\"}"));

 

获取js对象属性详情

var obj = {
 
    message : 'Hello JavaScript!'
 
};
 
console.log(Object.getOwnPropertyDescriptor(obj,'message'));

obj里面有一个属性message,而message又有四个描述性的东西,分别是configurable(可配置),enumerable(可枚举),value(值),还有 writable(可写入)。这四样东西,专业术语叫做属性描述符,或者数据描述符。目前我们看到的数据描述符都被赋予了默认值,我们也可以通过defineProperty方法对其进行个性化配置。

比如,我们把message设置为只读:

var obj = {
 
    message : 'Hello JavaScript!'
 
};
 
console.log(Object.getOwnPropertyDescriptor(obj,'message'));
 
Object.defineProperty(obj,'message',{
 
    writable:false
 
});
 
obj.message = 'haha';
 
alert(obj.message);

 

修改无效,值不会变,严格模式下会报错(加一行代码:'use strict' )

 

六.闭包

闭包就是在函数被创建的时候,存在一个私有作用域,并且能够访问所有的父级作用域。因此理论上讲,任何函数都是一个闭包。

从应用的角度来看,闭包可以讲函数或者对象的私有数据暴露出去,而不影响全局作用域。

function house(){    
    var footBall = '足球';
    /* 客厅 */
    function livingRoom(){        
        var table = '餐桌';        
        var sofa = '沙发';
      alert(footBall);
    }    
    
    /* 卧室 */
    function bedRoom(){        
        var bed = '大床';
    }
    
    livingRoom();
}

house();

 

函数house是一个闭包,里面又定义了两个函数,分别是livingRoom客厅,和bedRoom卧室,它们各自形成一个自己的闭包。对它们而言,父级作用域就是house。

 

如何将私有数据暴露出去

1.定义一个全局变量。 缺点:全局作用域比较敏感,一不小心就会出现变量名重复的问题

2.js函数也是一个数据类型,你可以把它看成和int,float一样的东西,那么既然int可以当做函数的返回值,函数当然也可以!

 

请记住以下两句话:

如果函数被当做参数传进去了,它就是所谓的回调函数

如果函数被当成返回值return出去了,它就是把一个闭包return出去了

egg:

var test = function(){    
    var i = 10;/* 定义一个函数将变量i暴露出去*/
    var get = function(){        
        return i ;
    }    
    return get; //将函数暴露出去
}


function test2(){    
  var fn= test();//接收test暴露出来的函数
  alert(fn()); //获得test中的私有数据
}

test2();// 10

 

讲私有数据包装成json对象

var test = function(){    
    var apple = '苹果';    
    var pear = '梨子';
    /* 定义一个函数将水果暴露出去*/
  var getFruit = {
    apple : apple ,
    pear : pear
  }   
    return getFruit; //将对象暴露出去
}


function test2(){    
  var getFruit = test();//接收test暴露出来的函数
  console.log(getFruit);
}

test2();

 

var 紫金葫芦 = function(id){    
      var domElement = document.getElementById(id);    
    var returnObject = {

        domElement : domElement ,

        backgroundColor : function(color){
            domElement.style.backgroundColor = color;
        },

        click : function(fn){
            domElement.onclick = fn;
        }
    };    
    return returnObject;
}

 

这些方法是不是和jQuery有点类似呢? 

 

七.js类库

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title></title>
        <script>
            (function(win){ 
              var miniQuery = function(selector){
           var miniQuery = document.getElementById(selector);
      
           return {
               obj : miniQuery , //将dom元素保存起来,再返回给你
               // ------------------------ css 相关 ------------------------//
               backgroundColor : function(color){
                   this.obj.style.backgroundColor = color;
               }
           }
       }
    
         win.$ = miniQuery;
    
      })(window);
 
      var $box = $('box');
      $box.backgroundColor('red');
        </script>
    </head>
    <body>
        <div style='padding: 50px;display:inline-block;background: blue;' id='box'></div>
    </body>
</html>

 

学习参考地址:http://www.xiaotublog.com/

 

posted @ 2017-06-28 16:16  hxsg  阅读(257)  评论(0编辑  收藏  举报