3、ExtJs——JavaScript基础

最新推荐文章于 2024-12-28 03:59:13 发布

kaoa000

最新推荐文章于 2024-12-28 03:59:13 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页前台技术

本文链接：https://blog.youkuaiyun.com/kaoa000/article/details/39296557

网页前台技术专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括数据类型、变量、数组、函数、对象及面向对象编程等内容，并探讨了如何利用这些知识更好地掌握ExtJS框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJS是一个强大的javascript框架，如果想真正的掌握ExtJS，那么我们必须要对javascript有一定的认识。

需要掌握的内容有：
- javascript之数据类型、变量、变量操作符javascript之数组
- javascript之函数
- javascript之对象、面向对象
- javascript之原型

javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。
- number：就是数字值，包括整数、小数、NaN、正负无穷。
- string:字符串类型、单双引号引起来的内容。
- boolean:true、false
- object:表示所有的javascript对象，不用多说
- function:我们熟悉的方法，也就是函数类型，是javascript特有的数据类型。
- undefined:表示变量声明了但是并没有被赋值。

举例：

Ext.onReady(function(){
	//NUmber/String/Boolean/Object/Undefined/Function
	
	//Number
//	var num1 = 10;
//	var num2 = 10.5;
//	var num3 = .6; //0.6
//	var num4 = 070; //56
//	var num5 = 1/0; //正无穷
//	var num6 = window.parseInt("dasdsada");  //NaN not a number
	
	//String 单双引号表示的字符串
	//Boolean  true/false
	
	//Object
//	var date = new Date();
//	var arr = new Array();
//	var obj = {name:'ddd',age:10};
//	alert(obj.hasOwnProperty('name'));
	
	//ECMA5
	
	//Undefined 变量声明了但是没有被赋值  其实也等同于Null
//	var a;
//	alert(a);
//	alert(undefined == null); //true
//	alert(undefined === null); //false
//	alert(typeof null);   //object 表示的就是一个空对象的引用
//	
	//Function
	function fun(){
		console.info('fun...');
	}
	
	fun();
	alert(typeof fun);  //Function
	
});

- javascript声明变量用var关键字+name表示。
- javascript变量是弱变量类型，所谓的弱变量类型其实就是根据赋值决定变量的类型。
- javascript变量分为全局变量和局部变量，所有在方法里声明的变量，都是局部变量，在方法外声明的变量都是全局变量。
- javascript之运算操作符:
- javascript里运算符和java基本一样，typeof 操作符是判断数据类型的操作符，非常的实用。

javascript 更不建议使用全局变量（查找的时候效率比较低，大型程序开发时不安全）

javascript之数组
数组是javascript里最常用的对象了，它类似于java里的容器，可以承装不同类型的元素，容器的长度也可以任意。数组操作非常灵活，且里面有很多常用的方法。
push、pop
shift、unshift
splice、slice
concat、join
sort、reverse
ECMA5也对Array扩展了很多实用的方法，比如forEach、filter、some等..

	//Array
//	var arr = [1,2,3,4,5];
//	arr.forEach(function(item){
//		alert(item);
//	});
	
	var arr1 = [10,21,35,32,13];
	var newarr1 = arr1.filter(function(item){
		if(item > 20){
			return true;
		}else{
			return false;
		}
	});
	alert(newarr1);

javascript之函数
对于Ext开发者，我还是希望你能对javascript原生的东西非常了解、甚至熟练掌握运用。那么函数，无疑是非常重要的概念。首先在前面一讲，我们知道了函数也是一种数据类型，创建函数一共有三种方式。每种方式他们都会有区别，分别为:
- function语句形式
- 函数直接量形式
- 构造函数形式
函数中的arguments对象
- argument的作用一：接受函数的实际参数
- argument的作用二：用于做递归操作

//Function 函数

//前两种创建函数的主要区别：function语句形式，javascript解释器直接会去找，其他的代码就从上到下顺序执行
//1:function语句形式
fun1();
alert(fun2);  //undefined
fun2(); //出错
function fun1(){
alert('fun1...');	
};

//2:函数直接量的形式
var fun2 = function(){
	alert('fun2...');
};

//第三种构造函数式，它具有的作用域与前两种不同，它具有顶级作用域
//3:构造函数形式
var fun3 = new Function('x','y','return x+y;');
alert(fun3(10,20));

//var k = 1;
//function test(){
//	var k = 2;
//	//创建三种方式的函数：
//	function f(){return k;};  //f()=2
//	var f = function(){return k}; //f()=2
//	var f = new Function('return k;');  //f()=1  相当于在最外层，顶级域声明
//	alert(f());  
//};
//
//test();

arguments对象

//arguments对象，每一个函数内部都有一个arguments对象
//function test(x,y){
//	//第一个作用：接受函数的实际参数
//	alert(arguments);  //object arguments
//	alert(arguments.length);  //3
//	
//	
//	alert(arguments[2]);  //3
//};
//test(1,2,3);

//第二个作用：通常用于递归操作
function fact(number){
	if(number <= 1){
		return 1;
	}else {
		return number * fact(number - 1);	
	}
};
alert(fact(5));

var fact2 = fact;
fact2(5);

//下面写法出错
var fact2 = fact;
fact = null;
fact2(5);

//修改:
function fact(number){
	if(number <= 1){
		return 1;
	}else {
		return number * arguments.callee(number - 1);	
	}
};

//下面写法不会出错
了var fact2 = fact;
fact = null;
fact2(5);

javascript之函数
this关键字的使用
this关键字总是指向调用者，谁调用函数，this就指向谁
call、apply的使用
call和apply主要应用与框架底层，用于绑定函数的执行环境/作用域
块的概念
和高级程序语言不同，js里没有块的概念，我们一般用小括号包裹块级作用域
闭包：掌握闭包必须要深入清楚的概念
- 执行环境
- 作用域链
- 垃圾回收机制

this的使用：

//This 关键字在javascript里的使用

function test(){
	alert(this.x);	
};
test.x = 10;
//alert(test.x);  //10
test();  //undefined 相当于window.test();

//如果在定义一个变量如下
var x = 5; //相当于window.x=5
function test(){
	alert(this.x);	
};
test.x = 10;
test();  //弹出框显示5，

call apply：

//call apply 主要作用是绑定作用域
var color = 'red';
var obj = {color:'yellow'};

function showColor(x,y,z){
	alert(x+y+z);
	alert(this.color);
};
showColor(); //red

//call . apply 绑定一个函数，到你指定的作用域内执行
showColor.call(window,10,10,30);
showColor.call(obj,10,10,30);
showColor.apply(obj,[2,3,4]);//参数是数组

块的概念：

//块的概念：
function test(){
	for(var i = 1;i<=5;i++){
		alert(i);
	}
	alert(i);  //这里也能执行 显示了6
};
test();

function test(){
	(function(){
		for(var i = 1;i<=5;i++){
			alert(i);
		}
	})();	
	alert(i);  //这里执行 显示错误
};
test();
//注意，在javascript中，要想直接执行一个函数，可以使用(function(){...})();形式

闭包：

//闭包：执行环境、作用域、js垃圾回收
//函数碰到return直接返回，没有return返回结果undefined

function test(){
	return function(){
		alert('这是闭包体代码。。。');
	};
};
alert(test());  //返回的是：function(){	alert('这是闭包体代码。。。');};

var f = test();
alert(typeof f); //function
f();

function test(){
	var temp = 10;
	return function(){
		alert(temp);
	};
};
test()(); //10

闭包的一个作用是局部变量实现全局变量的功能
例如做一个网页上按钮点击次数的例子，网页上有一个按钮，点击一次显示一次点击次数，每点击一次加1
一种做法是：

<body>
    <input type="button" value="点击" onclick="test();"> <br>
  </body>

var i = 0;
function test(){
	alert(++i);
};

定义一个全局变量i，点击一次自动加1

另一种做法使用闭包：

<body>
    <input type="button" value="点击" onclick="<span style="color:#ff0000;">inp.getCount();</span>"> <br>
  </body>

var inp = (function(){
	var i = 0;
	return {
		getCount:function(){
			alert(++i);
		}
	};
})();

javascript之对象、面向对象

使用json对象（JavaScript Object Notation）
- JS对象的特性
- 对于js来说json对象非常的重要，我们要学会如何操作json对象
面向对象的概念
- 如何定义一个类、如何实例化对象、如何扩展对象(原型prototype)
- 单体模式：简单单体、闭包单体、惰性单体、分支单体
- 对象的定义其他方式(工厂模型、稳妥对象、聚合对象)
- 原型的使用、原型链
- 原型的继承（多种方式实现：组合继承、借用构造函数继承、混合继承、掺元类等）
- 链式编程
- javascript契约书：接口（注释法、属性检测法、鸭式辨型法）
设计模式：如果能够掌握JS的设计模式，我相信在以后的Ext学习中，慢慢的研读，体会Ext底层代码的设计，是非常有帮助的。

json对象

Ext.onReady(function(){
	//var obj = new Object(); 一种定义对象的方法
	var obj = {name:'zzz',age:30};//json对象
//	obj.sex = '男';  //新增属性
//	obj.age = 25;   //修改属性的值
//	delete obj.name; //删除对象的属性
	
	//枚举对象内置属性的循环
	for(var attr in obj){
		alert(attr + ":" + obj[attr]);
	}
	
	
});

对象的定义，实例化

	var Person = function(name,age){
		this.name = name;
		this.age = age;
		
		//private
		var _sex = '男';  //js私有属性
		this.getSex = function(){
			return _sex;
		};
		this.setSex = function(sex){
			_sex = sex;
		};
	};
	
	//实例化一个对象
	var p = new Person('张三',30);
	alert(p.name);

对对象的各种扩展（属性和方法）：

	var Person = function(name,age){
		this.name = name;
		this.age = age;
		
		//private
		var _sex = '男';  //js私有属性
		this.getSex = function(){
			return _sex;
		};
		this.setSex = function(sex){
			_sex = sex;
		};
	};
	Person.prototype.id = 10;    //扩展对象属性
	Person.prototype.method = function(){         //扩展对象方法
		alert(this.age);
	};
	//实例化一个对象
	var p = new Person('张三',30);
	alert(p.name);
	alert(p.id);
	p.method();

要注意，实例化的语句要放在扩展之后：

	//原型对象的构造器总是指向当前对象的模板
	Person.prototype = {               //另一种扩展对象的方法，推荐使用
		constructor:Person,
		id:10,
		method:function(){
			alert('method...');
		}
		
	};
	
	//实例化一个对象
	var p = new Person('张三',30);
	alert(p.name);
	alert(p.id);               
	p.method();

单体模式：

	//单体模式：
	var ZCD = {};
	ZCD.Array = {
		each:function(){
			alert('each');
		},
		filter:function(){
			alert('filter');
		}
	};
	ZCD.staticMethod = function(){
		alert('我是单体下的静态方法');
	};
	ZCD.Array.each();
	ZCD.staticMethod();

闭包单体：

	//单体模式：闭包单体
	var ZCD = (function(){
		var Array = {
			each:function(){
				alert('each...');
			}
		};
		
		return {
			arrayEach:function(){
				Array.each();
			}
		};
	})();
	
	ZCD.arrayEach();