js高级

来源：互联网发布：无网络怎么安装手写板编辑：程序博客网时间：2024/05/18 18:55

js技术

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

变量的作用域：

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，

*函数可以使用函数之外定义的变量。

*函数之外不能使用函数内部定义的变量。

/* varr=10;

functiontest1(){

alert(r);

varb=20;

}

test1();

alert(b);*/

/* vara=10;

functiontest2(){

varb=20;

functiontest3(){

varc=30;

returna+b+c;

}

returntest3();

}

alert(test2());*/

functiontest4(){

varr=10;

vararr=[];

for(vari=0;i<3;i++){

arr[i]=function(){

returnr;

}

returnarr;

}

vararr2=test4();

alert(arr2[0]());

alert(arr2[1]());

alert(arr2[2]());

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

*函数的形参个数，可以和实参个数不一样。

*函数执行的时候，实参数会被封装成一个数组对象，传递给函数

*arguments,是函数调用时实参封装成的对象。

functionadd(a){

returna+10;

}

//alert(add(5));

functionadd(a,b){

alert(arguments);

returna+b;

}

//alert(add(8,8));

//alert(add(9));

//alert(add(1,2,3,4,5));

/*function argumentTest(){

//alert(arguments.length);

for(vari=0;i<arguments.length;i++){

alert(arguments[i]);

}

argumentTest(1,2,3);*/

functionadd(){

//获得实参的个数

varlength = arguments.length;

if(length==0){

return10;

}elseif(length ==1){

returnarguments[0]+9;

}elseif(length ==2){

returnarguments[0]+arguments[1];

}

alert(add());

alert(add(8));

alert(add(88,998));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

函数的定义一：普通函数：

functiontest(a,b){

returna+b;

}

函数的定义二：动态函数：

vartest = new Function("a","b","return a+b;");

思考：

函数名是什么？函数名实际上，也是个变量。

vartest=function(){

}

vartest = function(arg1,arg2){

//js代码

}

1\函数名当变量来用，可以赋值，可以传值。

2\函数名当参数，传递给另一个函数来执行

3\普通函数的回调

4\匿名函数的回调。

5\匿名函数的自调

6\带参数的匿名函数自调。

意义：1、营造一个封闭的空间。

2、防止变量冲突。

3、有选择性的对外开发。(第三方框架，大多都是这么干的)

//1\函数名当变量来用，可以赋值，可以传值。

/* functionadd1(a,b){

returna+b;

}

varadd2=add1;

alert(add2(5,6));

functionadd1(){

return22;

}*/

//2\函数名当参数，传递给另一个函数来执行

/* functionargfun(){

return33;

}

functiontestfun(fu){

varr = fu();

returnr;

}

varru = testfun(argfun);

alert(ru);*/

//3\普通函数的回调

functionshopping(time,fun){

alert("我去血拼了");

if(time<5){

fun();

}

functionkuaidi(){

alert("我去取快递");

}

//shopping(11,kuaidi);

//4\匿名函数的回调。

/*shopping(4,function(){

alert("帮我带箱啤酒");

});*/

//5\匿名函数的自调

/*var tt = function(){

alert("我怎么没有名啊");

}

tt();*/

/*var ee=10; //这样肯定是错误的。

ee();*/

/* (function(){

alert("我怎么没有名啊,没名我也执行了");

})(); */

//有参数的情况

/*(function(msg){

alert(msg);

})("我的美，你能懂吗？");//此处的我的美，你能懂吗？是我们传递的一个参数。 */

//模拟第三方框架的做法

(function(){

varname="tom";

varage=20;

functiontestAge(){

//要想执行的逻辑

returnage;

}

testAge();//传递到外界，让外界使用我定义的函数。

window.testAge1= testAge;//传递出去。

})();

vara = testAge1();

alert(a);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert titlehere</title>

<scripttype="text/javascript">

给对象添加属性：

用 .

* . 只能声名字符串属性名

varo={};

o.name="tom"

用 []

用.添加属性，默认属性名是字符串，也就是说，用.只能添加属性名为字符串的属性。

用[]添加属性，可以添加任意类型的属性。

varo={};

o.name="tom"; // . 只能声名字符串属性

alert(o.age);

o.age=20;

alert(o.age);

deleteo.age;

alert(o.age);*/

varobj={};

obj["name"]="tom"; // 等价于 obj.name="tom";

obj["age"]=20;

//alert(obj["name"]);

//deleteobj.name;

//alert(obj["name"]);

//声明的属性是动态的属性。

varargname="testname";

obj[argname]="argvalue";

//alert(obj[argname]);

//alert（obj.argname）; 是找不到属性值的。

//用for in 语句遍历对象的所有属性。

for(varitem in obj){

// alert(item);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

创建一个新的函数对象，并设置一些属性和方法

this用在对象的方法中, 总是指向调用该方法的对象

functionHero(name, color){

this.name= name;

this.color= color;

this.whatareyou= function(){

return"I am a " + this.color + " " + this.name;

}

varhero = new Hero("javascript","red");

alert(hero.whatareyou()); //output Iam a red javascript

*特点：

清晰明了，容易理解，

但，有个缺点,实例对象多了以后，会一些多余的内存开销。

functionPerson(name,age){

this.name=name;

this.age=age;

this.getAge=function(){

returnthis.age;

}

//this.getAge= new Function("return this.age;"); 上面的get方法和此处new的方法一样作用。

}

varp1 = new Person("tom",18);

//alert(p1.name);

//alert(p1.getAge());

p1.name="文章";

deletep1.name;//删除时候属性名相当于也删除了。

p1.name234="文章2";

alert(p1.name);

//alert(p1.name2);

varp2 = new Person("jim",10);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

原型：prototype

*对象的属性不会被继承给新创建出来的实例对象。

*对象的原型属性会继承给新创建出来的实例对象。

*原型属性可以被覆盖,但不能被删除

functionPerson(){};

Person.name="tom";

Person.prototype.name="jim";

Person.prototype.age=12;

Person.prototype.getAge=function(){

returnthis.age;

}

varp1 = new Person();

//alert(p1.name);

//alert(p1.age);

p1.name="马伊犁";

deletep1.name;

alert(p1.name);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Insert titlehere</title>

<scripttype="text/javascript">

用组合模式创建自定义对象是开发中最常用的方法：

基本类型的用构造函数的形式，若是function类型的属性则用原型的模式。

functionHero(name,age) {

this.name= name;

this.age= age;

};

Hero.prototype.getName= function(){

returnthis.name;

};

functionPerson(name,age){

this.name=name;

this.age=age;

}

Person.prototype.setName=function(name){

this.name= name;

}

Person.prototype.getAge=function(){

returnthis.age;

}

varp1 = new Person("tom",16);

alert(p1.name);

p1.setName("黄海波");

alert(p1.name);

</script>

</head>

<body>

</body>

</html>

0 0