JavaScript基础知识

来源:互联网 发布:c语言编程技巧 编辑:程序博客网 时间:2024/06/16 07:49

 

 

JavaScript基础知识



1 JavaScript基础知识

JavaScript的中的6种基本数据类型:numberstringbooleanobjectfunctionundefined

- 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)


原创粉丝点击