JS 笔记--基础篇
浅谈JavaScript的语言特性
一片很好的JSer入门和复习查阅的帖子；
-------------------------------------------------------------------------------------------------------------------------------
JS - OO思想
ECMA-262 定义对象为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”
严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而且每个名字都映射到一个值。正因为这样，我们可以把ECMAScript的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。
1、特殊事件
<!-- 此为浏览器出发基于 javascript 的引擎，来执行js程序 -->
<a href="javascript:alert('helloWorld!')"> 点我</a>
<!--该为基于事件，基于onclick事件 -->
<a href="1.html" onclick="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" onclick="clickMe('你好','你不好')" />
</div>例如：
<body>
<script type="text/javascript" >
function clickMe(a) {
alert('ClickMe say : ' + a + ' ; ' + arguments[0]);
}
</script>
<input type="button" name="点我22" value="点我22" onclick="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="点我 " onclick="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="点我 " onclick="clickMe()" />
</form>
</body>
</html> 相关推荐
88274956 2020-11-03
Zhongmeishijue 2020-09-10
runner 2020-09-01
梦的天空 2020-08-25
IdeaElements 2020-08-19
luvhl 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
NARUTOLUOLUO 2020-08-03
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
OldBowl 2020-06-26
北京老苏 2020-06-25
Luffyying 2020-06-25