JavaScript学习
JavaScript学习
一、简介
JavaScript 被用来改进设计、用户体验、验证表单、检测浏览器、创建cookies...JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护。
1. 什么是 JavaScript?
· JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
· JavaScript 由数行可执行计算机代码组成。
· JavaScript 通常被直接嵌入 HTML 页面。
· JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。)
· 所有的人无需购买许可证均可使用 JavaScript说明: 解释执行主要针对编译执行来说的,高级语言需要翻译成机器语言(汇编、机器码...) , javascript不需要编译,而是在执行的时候有解释器(浏览器)进行逐行解释。解释执行的优点是灵活方便,缺点是执行速度相对较慢
2.DOM文档对象模型
不同的浏览器文档对象模型有些区别(IE6中各节点之间的空格也计算为一个节点)
DOM把元素看做一种节点类型,只是DOM有12中节点类型,元素(Element)只是其中的一种。好在大多数节点只有从事XML的人才需要关心,对于HTML只需要懂得三种常用的节点类型就够了:元素、属性和文本。
描述 | 节点类型(nodeType) |
Element(元素) | 1 |
Attribute(属性) | 2 |
Text(文本) | 3 |
//查找HTML代码中是文本节点的,并且显示该节点的值
var elements = document.getElementsByTagName(“body”)[0].childNodes;
for (var i = 0; i < elements.length; i++) {
if (elements[i].nodeType == 3) alert(elements[i].nodeValue);
}
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=”abc”>My link</a>
<h1>My header</h1>
</body>
</html>
3.BOM浏览器对象模型
JavaScript可以通过BOM提供的API,对浏览器窗口进行访问和操作。使用BOM,开发者可以移动窗口、改吧状态栏中的文本以及执行其他与页面内容不直接相关的动作。由于没有相关的BOM标准,每种浏览器都有自己的BOM实现;常见的BOM对象有:Window对象、Navigator对象、Screen对象、History对象、Location对象
常见的如:window.doument.getElementById()、window.location.href、window.history.go(-1)
二、JavaScript知识点
1.原始类型
ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。
可以通过typeOf运算符来判断,对象,数组和null的typeOf为object类型(代码示例1)
2.JavaScript中模拟函数重载
ECMAScript函数的参数与大多数其他语言中的函数参数有所不同。ECMAScript函数不介意传递进来多少个参数,也不在乎参数的类型。之所以这样,是因为ECMAScript中的参数在内部是用一个数组表示的。函数接收的始终是这个数组,实际上,在函数体内可以通过arguments对象来访问这个参数数组,从而传递给每一个参数。(代码示例2)
ECMAScript函数:命名的参数值提供便利,但不是必需的。Arguments对象可以与命名参数一起使用,并且Arguments对应参数的值与对应命名参数的值是保持同步的(代码示例3)
综上所述:JavaScript中不存在重载,但可以通过arguments对象模拟实现函数重载
3.JavaScript中对象
JavaScript中创建对象:
var book = new Object(); book._year= “zhangsan”; book.edition= 33;
var book= { name: “zhangsan”, number: 33 };
设置对象属性的特性
var book = { _year: 2012, edition: 1 };
Object.defineProperties(book, {
_year: { configurable: false, writable: false, value: 2012 },
edition: { configurable: false, writable: true, value: 1 },
year: {
get: function() { return this._year; },
set: function(newValue) {
if( newValue > 2012) {
this._year = newValue;
this.edition += newValue - 2012;
}
}
}
});
book.year = 2013;
alert(book.edition); //2
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value + ":" + descriptor.configurable + ":" + typeof descriptor.get);
//顺带讲一下Javascript的方法种类。我个人将Javascript的方法分为三种:
//<1>类方法
//<2>对象方法
//<3>原型方法
function People(name){
this.name=name;
//对象方法
this.Introduce = function(){
alert("My name is "+this.name);
};
}
//类方法
People.Run=function(){
alert("I can run");
};
//原型方法
People.prototype.IntroduceChinese=function(){
alert(" 我的名字是"+this.name);
};
var p1 = new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();
function tree (opt){
this.__id = opt.id;
};
tree.init = function (opt) {
return new tree(opt);
};
tree.prototype = {
id: function(){ alert(this.__id); },
other_id: function(){ alert(this.__id); }
};
tree.init({id: 122}).id();
tree.init({id: 3231}).other_id();
4.原型
JavaScript被称为基于原型(prototype)的语言,其原因在于继承是通过原型链来实现的。在前面的例子中,每个新的对象实例化时都会把原对象的属性和方法复制一份。如果存在1000个对象,就会有1000份属性和方法--每一份都单独占据一块内存
为了避免这种额外的开销,JavaScript引入了一个特殊的原型属性,附在原型属性上的方法将被所有对象共享:
var Adder = function(valueA, valueB) {
this.value = valueA + valueB;
}
Adder.prototype.result = function() { alert(this.value); };
var added = new Adder(4, 3);
added.result();
5.闭包
简单来说,闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。
闭包就是“属性表”,闭包就是一个数据块,闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是,必须强调,闭包是一个运行期概念。
在Javascript中闭包(Closure),有两个特点:
· 作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
· 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
现在比较让人认同的闭包实现有如下三种
with(obj){
//这里是对象闭包
}
(function(){
//函数闭包
})()
try{
//...
}catch(e) {
//catch闭包 但IE里不行
}
闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
如下例 (代码示例)
//*************闭包uniqueID*************
uniqueID = (function(){
var id = 0;
var rtnMethod = function(){return id++;};
return rtnMethod;
})();
document.writeln(uniqueID());//0
document.writeln(uniqueID());//1
document.writeln(uniqueID());//2
document.writeln(uniqueID());//3
document.writeln(uniqueID());//4
在这段代码中,uniqueID实际上就是闭包return返回的函数。uniqueID是rtnMethod的父函数,而rtnMethod被付给了一个全局变量, 这导致rtnMethod始终在内存中, 而rtnMethod的存在依赖于uniqueID,因此uniqueID也始终在内存中,不会再调用结束后,被垃圾回收(grabage collection)机制回收
JavaScript没有块级作用域,只有函数级作用域
function User( properties ) {
//这里一定要声明一个变量来指向当前的instance
var objthis =this;
for (var i in properties ) {
(function(){
//在闭包内,t每次都是新的,而 properties[i] 的值是for里面的
var t = properties[i];
objthis["get" + i ] =function() {return t;};
objthis["set" + i ] =function(val) {t = val;};
})();
}
}
6.JavaScript中继承
JavaScript中继承分为深继承和浅继承。Prototype原型继承属于浅继承,下例是深继承
function base() {
this.member = " dnnsun_Member";
this.method = function() { window.alert(this.member); }
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.method);
}
extend();
浅继承
var Dog = function() {};
Dog.prototype.bark = function() { alert(“woof”);};
var DogA = function() {};
DogA.prototype = new Dog();
var a = new DogA();
a.bark();