js基础介绍



{
    "name": "李永剑",
    "nickname": "耗子",
    "weibo":"@前端的那点破事"
}

“1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。......网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。” 


教主
Brendan Eich


Brendan Eich
Brendan Eich


大护法
Douglas Crockford


内联脚本
<script>
     alert('hello world');
</script>
外联文件
<script src="hello.js"></script>
行内脚本
<div onclick="alert('hello world')"></div>
伪协议
<a href="javascript:alert('hello world');"></a>

基本语法

1.双引号与单引号无差别
2.分号不敏感
3.缩进空格不敏感
4.大小写敏感
5.变量使用前需声明
6.弱类型


数据类型

    
  1. Undefined
  2. Null
  3. Boolean
  4. Number
  5. String
  6. Object


null == undefined
null !== undefined
null表示空指针
undefined表示未定义
任何申明了却没有赋值的变量默认值就是undefined
任何时候不会显式地将变量赋值成undefined

Boolean

true  false

undefined null "" 0 false 都是假值,其它都为真值

Number

数字只有一种类型 number,不区分int float double
遵守 IEEE 754规范 0.1+0.2 !== 0.3


一些特殊值

NaN
Infinity
-Infinity
Math.PI
Math.E
Math.LOG10E
Math.LOG2E



string

使用+连字符

不区分单双引号
 var string = 'hello world';

Object

Object
Array
Function
{
    ‘key’: value
}
[0, 1, 2, 3]
function foo() {}

对象的访问方法

1.点访问 
2.方括号访问
var a = {
    hello:1
}
var foo = 'hello';

a.hello;
a['hello'];
a['he' + 'llo'];
a[foo];

两者没有区别,第二种更灵活

JSON

json是对象字面量的一个子集,语法上有严格的要求
它的本质是字符串
json 的key必须以双引号包裹,value只能为Boolen Null String Number Object(Array) ,不能是Function,字符串必须以双引号包裹
{
    "key1": true,
    "key2": "string"
    ...
}
ecma5开始支持JSON.parse与JSON.stringify,将js对象与json字符串相互转换
php5.2后有json_decode与json_encode函数处理json字符串与php数组的相互转换

Array

数组是一个有序的成员集合
var arr = [0, 1, 2];
var arr = new Array(0, 1, 2);//任何时候不建议使用

shift push  ---> 队列
shift unshift --> 栈
Array的长度可以动态伸缩 var arr1 = []; for (var i = 0; i < 100; ++i) { arr1.push(i); } arr1.length = 10;
var arr2 = [1, 2, 3, 4, 5, 6];
for (var i = 0, len = arr2.length; i < len; ++i) { //遍历数组的优化
。。。。
}

arr2.forEach(function (item, index) {

})

Function

function是js中的一等公民,别的都是数据,function是操作,function也可以存储数据
function foo() {}         // 函数声明
var bar = function () {}; // 函数表达式
(function () {})();       // 立即执行的匿名函数
函数声明是声明一个函数

函数表达式是将一个匿名函数赋值给一个变量
函数声明与函数表达式大部分时候没有区别,但发生的时机不一样

立即执行的匿名函数是将一个不具名的函数立即执行(稍后重点讲)



代码风格

1.function的左括号不另起到下一行
function foo() {
    ...
}

2.构造函数首字母大写 使用CamelCase大驼峰方式命名

作用域

js中只有全局作用域和函数作用域 
在函数体外声明的变量、函数都会成为全局对象
在函数体内通过隐式赋值或显式地声明为window对象的成员将成为全局对象

var foo = 'string';
function bar () {

}

function bar2() {
    var a = 'local';
    b = 'global'; // 隐患
    window.c = 'global';
}

function bar3() {
   var a = b = 1;
   var c = 1,
       d = 2,
       e = 3    //雅蠛蝶,丢了个逗号!
       f = 4;
}


js为何没有块作用域?

嫑提了,当年网景的老大催着赶工,只花了10天时间设计js的解析器,作用域复杂了尼马搞不定,人艰不拆啊!!!啊!!!啊!!!

(function () {
    // 此处将构建一个函数作用域,用此模拟块级作用域
})();
模块写法
(function (exports) {
    'use strict';
    var jQuery = function () {
      // 此处省略1万行
    }

    exports.$ = exports.jQuery = jQuery;
})(window);



闭包

var o = (function () {
    var a = 0;
    function get() {
        return a;
    }
    function set (n) {
        a = n;
    }
   
    return {
        get: get,
        set: set
    }
})();

o.get();  // 0;
o.set(5); 
o.get();  // 5

继承

js中没有经典的Class类,js通过prototype的原型方式继承
function Animal (legs, eyes) {
    this.legs = legs || 4;
    this.eyes = eyes || 2;
}
Animal.prototype.say = function () {
     alert('woooooooo');
}

var animal = new Animal();
animal.say(); // 'woooooooo'

var Rat = function () {};
Rat.prototype = new Animal();
Rat.prototype.say = function(){
    alert('吱吱');
}
var rat = new Rat();
rat.say(); // 吱吱
rat.legs   // 4
rat.eyes   // 2

推荐阅读

http://book.douban.com/subject/3590768/
http://book.douban.com/subject/2228378/
http://bonsaiden.github.io/JavaScript-Garden/zh/

Made with Slides.com