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); // 输出的结果120var 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、60showColor.call(obj, 10, 30, 40); // 输出的结果：yellow、80// apply只能传递数组showColor.apply(window, [ 1, 2, 3 ]); // 输出的结果：red、6showColor.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); // 返回的functionvar temp = fun9();temp(); // 输出结果：最简单的闭包函数

闭包案例二：

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

闭包案例三：

<input type="button"value="统计点击次数"onclick="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);         // 扩展属性输出:10person.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)