浅谈JavaScript的语言特性
一片很好的JSer入门和复习查阅的帖子;
-------------------------------------------------------------------------------------------------------------------------------
JS - OO思想
ECMA-262 定义对象为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”
严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而且每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。
1、特殊事件
<!-- 此为浏览器出发基于 javascript 的引擎,来执行js程序 -->
<a href="javascript:alert('helloWorld!')"> 点我</a>
<!--该为基于事件,基于onclick事件 -->
<a href="1.html" οnclick="alert('helloWorld!')"> 点我</a>
2、Js声明变量
<script type="text/javascript" >
var i = 100; //此为Js声明的若变量
ii = 100; // Js中不用“var”声明变量,Js则认为此为全局变量,
//除非是你想使用全局变量,否则不建议这样使用,避免Js程序变量冲突
</script>
3、理解函数传入的参数
<script type="text/javascript" >
/* ECMAScript函数的参数:函数不介意传递多少个参数进来,哪怕不定义传入参数,函数也能已数组形式接受参数
* 通过arguments[i] 来获取传入参数。
*/
function clickMe() {
alert('ClickMe say : '+arguments[0]+' ; '+arguments[1]);
}
</script>
<div>
<input type="button" name="点我22" value="点我22" οnclick="clickMe('你好','你不好')" />
</div>
例如:
<body>
<script type="text/javascript" >
function clickMe(a) {
alert('ClickMe say : ' + a + ' ; ' + arguments[0]);
}
</script>
<input type="button" name="点我22" value="点我22" οnclick="clickMe('你好','你不好')" />
</body>
4、JS中没有重载,遇到相同函数名不同参数时,后面的函数回覆盖前面的函数。
5、with(location)和try...catch(e)
<head runat="server">
<script type="text/javascript" >
function clickMe() {
/* 引用类型 */
/* 使用Object引用类型创建对象 */
var person = new Object();
person.name = "cht";
person.age = 24;
/* 使用“对象字面量”表示法,创建对象 */
var person2 = {
name : "wjh" ,
age : 24
};
alert(person + " ; /n/r" + person2);
}
</script>
</head>
6、引用类型
<head runat="server">
<script type="text/javascript" >
debugger; //断点调试
function clickMe() {
/* 引用类型 */
/* 使用Object引用类型创建对象 */
var person = new Object();
person.name = "cht";
person.age = 24;
/* 使用“对象字面量”表示法,创建对象 */
var person2 = {
name : "wjh" ,
age : 24
};
/* var person = new Object()等于var person = {}*/
alert(person + " ; /n/r" + person2);
}
</script>
</head>
7、Array类型
<head runat="server">
<script type="text/javascript" >
debugger; //断点调试
function clickMe() {
/* Array 类型 */
/* Array对象创建*/
//1、普通
var person = new Array();
//2、2B
var person = new Array(20);
//3、文艺
var person = new Array("red","blue","green");
//4、NB
var person = ["red","blue","green"];
</script>
</head>
8、Js特殊对象arguments和this
<head runat="server">
<script type="text/javascript" >
function clickMe() {
alert(factorial(10));
}
/*
*JavaScript中两个特殊的对象:arguments和this
* this : 不解释了
* arguments :只当前函数传递的参数,arguments已数组的方式存在;
* arguments中有个特殊属性 callee,它指向拥有这个arguments函数的指针。
*
*/
function factorial(num) {
if(num <= 1){
return 1 ;
} else {
alert(num);
return arguments.callee(num - 1); //arguments.callee(num -1)执行当前arguments的函数,传入参数num-1(获取对当前执行的函数的引用)
}
}
</script>
</head>
9、ECMAScript -262面向对象,对象实例化(工厂方法,构造函数、原型模式),hasOwnProperty(),in的用法
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function clickMe() {
/* 1、【弃用】实例化工厂方法对象 */
//debugger;
/* 2、实例化构造函数对象 */
var person1 = new Person("tom", 12, "F");
person1.sayName();
/* 3、【常用】实例化原型模式对象 */
var superPerson = new SuperPerson();
superPerson.sayName();
/* PS: 实例拥有自己的属性存储空间,
* superPerson.name = "11",屏蔽SuperPerson原型中的name属性,
* 原型中的SuperPerson.prototype.name = "jenny",始终保存,
* if (superPerson.hasOwnProperty("name")){//true 为实例中存在name属性}
* if ("name" in SuperPerson){//true 为原型中存在name属性}
*/
}
/* 构造函数,注意所有使用new的函数都可以叫做构造函数,构造函数的首字母要大写
* 如下: function Person(name,age,sex)中的Person,P需要大写。
*/
function Person(name,age,sex) {
this.name = name;
this.sex = sex;
this.age = age;
this.sayName = function () { //定义函数,常犯错误 this.sayName = new function(){};
alert(this.name);
};
}
/* 原型模式:创建的每一个函数都有一个prototype(原型)属性,这个属性是一个“对象”,它的“用途”
* 是包含可以有特定类型的所有实例共享的属性和方法。
* 按字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象的原型对象。
*
*/
function SuperPerson() {
}
/* 普通写法 */
SuperPerson.prototype.name = "jenny";
SuperPerson.prototype.age = 12;
SuperPerson.prototype.sex = "M";
SuperPerson.prototype.sayName = function () {
alert(this.name);
};
/* 对象字面量 写法 */
SuperPerson.prototype = {
constructor: Person , //将构造器指向Person
name : "jenny01",
age : 1201,
sex : "M01",
sayName: function () {
alert(this.name);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="点我 " value="点我 " οnclick="clickMe()" />
</form>
</body>
</html>
(9、补充)
组合使用构造函数模式和原型模式,ECMAScript中最常用的使用方法:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function clickMe() {
var person1 = new Person("tom1", 12, "F");
person1.sayFriends();
var person2 = new Person("tom2", 122, "F2");
person2.friends.push("3");
person2.sayFriends();
}
/* 组合使用构造函数模式和原型模式,目前ECMAScript中广泛使用*/
/*
* 将所有属性写在构造函数模式中,构造函数模式中,它的每个属性和方法都无法得到复用
*/
function Person(name,age,sex) {
this.name = name;
this.sex = sex;
this.age = age;
this.friends = ["1111", "2222"];
}
/*
* 将所有方法写在原型模式中,prototype属性来指定哪那些应该共享的属性和方法。
*/
Person.prototype = {
constructor: Person,
sayFriends: function () {
var friends = "[";
for (var i in this.friends) {
friends = friends + this.friends[i].valueOf() + " , ";
}
friends = friends + "]";
alert(friends);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="点我 " value="点我 " οnclick="clickMe()" />
</form>
</body>
</html>