JavaScript基础知识

 

 

JavaScript基础知识

1 JavaScript基础知识

JavaScript的中的6种基本数据类型：number、string、boolean、object、function、undefined：

- number:就是数字值，包括整数、小数、NaN、正负无穷。

- string:就是字符串，单双引号括起来的内容。

- boolean:true/false。

- object：表示所有的javascript对象。

- function:表示我们熟悉的函数，也是函数类型，是javascript特有的数据类型。

- undefined:表示变量声明了但是没有被赋值，也等同于nullalert(undefined ==  null); 返回true。

 

1.1 变量范围

//变量：全局、局部两种类型：

javascript：不建议使用全局变量(查找时候，JavaScript总结效率比较低下，大型程序时不安全);

//变量：全局、局部两种类型：

javascript：不建议使用全局变量(查找时候，JavaScript总结效率比较低下，大型程序时不安全);

 

Function函数创建的三种方式

第一种：function语句形式

function fun1(x,y){
     return x+y;
};

第二种：函数直接量的形式

var fun2 = functionn(x,y){
     return x+y;
};

第三种：构造函数形式：

var fun3 = new Function('x','y','returnx+y;');

 

前两者的区别：

第一种：javascript解释器直接执行

其它的：javascript代码从上到下按顺序执行

第三种：作用域与前两者不同，构造函数形式具有顶级的作用域。

1.2 arguments对象

函数中的arguments对象，每个函数内部都会有的一个argments对象

作用一：接受函数的实际参数：

function fun4(x, y) {
    // 作用一：接受函数的实际参数：
    alert(arguments.length); // 输出4
    alert(arguments[2]); // 输出3
}
fun4(1, 2, 3, 4);

作用二：用于递归操作

// 作用二：用于递归操作
function fun5(number) {
    if (number <= 1) {
        return 1;
    } else {
        return number * fun5(number - 1);
    }
}

alert(fun5); // 输出的结果120

var fun6 = fun5;
fun5 = null; // 将fun5置null后，函数将会出现错误
fun6(5);

//解决方法:

// arguments.callee 表示引用当前函数对象本身
function fun5(number) {
    if (number <= 1) {
        return 1;
    } else {
        return number * arguments.callee(number - 1);
    }
}

fun6(5); // 此时将输出120

1.3 this关键字

this关键字总是指向调用者，谁用户函数this就指向谁。

全局变量就是指window下。

var color = 'red';
var obj = {
    color : 'yellow'
};
function showColor(x, y, z) {
    alert(x + y + z);
    alert(this.color);
}
// call.apply绑定作用域
// call可以传递任意多的参数
showColor.call(window, 10, 20, 30); // 输出的结果：red、60
showColor.call(obj, 10, 30, 40); // 输出的结果：yellow、80

// apply只能传递数组
showColor.apply(window, [ 1, 2, 3 ]); // 输出的结果：red、6
showColor.apply(obj, [ 1, 3, 4 ]); // 输出的结果为：yello、8 

1.4 块的概念

function fun7(){
     for(int i =0;i<=5;i++){
         alert(i); // 输出1到5
     }
     alert(i);// 输出6
}

块的原理：javascript当函数执完之后垃圾回收器，会回收function中没有引用的变量。

function fun8(){
     (functionn(){
         for(int i=0;i<=5;i++){
              alert(i);     // 输出1到5
         }
     })();
     alert(i); // 报错：i is not defined
}

1.5 闭包概念

- 和高级程序语言不同，js没有块的概念，我们一般用小括号包裹块级作用域闭包：掌握闭包必须要深入的清楚的概念

       -执行环境

       -作用域链

       -垃圾回收机制

     

//函数碰到return直接返回，没有return返回undefined    

//在javascript语言中不提倡使用全局变量(1.不安全 2：做变量搜索查找效率比较低)

闭包案例一：

function fun9() {
    return function() {
        alert('最简单的闭包函数');
    }
}
alert(fun9); // 返回function内容
alert(typeof fun9); // 返回的function
var temp = fun9();
temp(); // 输出结果：最简单的闭包函数

闭包案例二：

function fun10() {
    var temp = 10;
    return function() {
        alert(temp); // 返回10
    }
}
fun10()();

闭包案例三：

<input type="button"value="统计点击次数"οnclick="inp.getCount" />

var inp = (function() {
    var i = 0;
    return {
        getCount : function() {
            alert(++i); // 输出每次i+1的结果
        }
    }
});

1.6 使用JSON对象

使用JSON对象(JavaScript Object Notation)

// 定义对象
var obj = new Object();

// json 对象
var obj = {
    name : 'zhangsan',
    age : 20
};

obj.sex = '男'; // 新增属性
obj.age = 25; // 修改属生值
delete obj.name; // 删除属性
// obj =null; //删除对象

// 遍历属性、属性值
for ( var attr in obj) {
    alert(attr + ":" + obj[attr]);
}
// 输出结果 name:zhangsan age:25 sex:男

1.7 面向对象的概念

- 定义一个类、实例化对象、扩展对象(原型prototype)

- 单体模式：简单单体、闭包单体、惰性单体、分支单体

- 对象的定义其它的方式（工厂模式、稳妥对象、聚合对象）

- 原型的使用、原型链

- 原型的继承（多种方式实现：组合继承、借用构造函数继承、混合继承、掺元类等）。

- 链式编程

- javascript契约书：接口（注释法、属性检测法、鸭式辨型法）

- 闭包的缺点：内存一直不会释放，一直被缓存。

// 定义JavaScript中的类
var Person = function(name,age){
     // 定义属性
     this.name = name;
     this.age = age;
     // 定义么有属性，一般私有属性以下划线开头
     var _sex = '男';
     // getter &setter
     this.getSex = function(){
         return _sex;
     }
     this.setSex =function(sex){
         _sex = sex;
     }   
}

// 扩展对象(原型prototype)
// 扩展属性
Person.prototype.id = 10;
// 扩展方法
Person.prototype.method = function (){
    alert('prototype.method()');   
};   

// 简单原型创建对象形式
// 原型对象的构造器，总是指向当前对象的模板
Person.prototype = {
     // 还原来的构造器
     constructor :Person,
     id : 10,
     method : function(){
         alert('method()');
     }
}

// 实例化对象
var person = new Person('张三',18);
alert(person.name);    // 输出:张三
alert(person.id);         // 扩展属性输出:10
person.method();         // 输出:prototype.method()
// 简单单体：单体对象
var SINGLETON = {};

// 定义方法
SINGLETON.Array =  function(){
     each:function(){
         alert('each mtheod');
     },
     filter:function(){
         alert('fiter mtheod');
     }
}

// 静态方法
SINGLETON.staticMethod =  function(){
     alert('静态方法');
}

SINGLETON.each();
SINGLETON.staticMethod();

// 闭包单体:单体对象
var SINGLETON2 = (function(){
     var Array = {
         each:function(){
              alert('each method');
         }
         return {
              arrayEach:Array.each();
         };
     }
})();

SINGLETON2.arrayEach(); 

1.8 学习JavaScript推荐书籍：

1. 《JavaScript高级程序设计》

2. 《JavaScript设计模式》

3. 《JavaScript DOM编程艺术（第2版）》

4. 《学习JavaScript数据结构与算法》

5. 《深入理解ES6》

 

                --以上为《JavaScript基础知识》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

                                                                                                                                                                                      ——厚积薄发(yuanxw)