javascript学习笔记 2

最新推荐文章于 2024-05-31 10:26:40 发布

baobaoyeye

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量639

点赞数

分类专栏： JavaScript 文章标签： javascript fun function object button email

本文链接：https://blog.csdn.net/baobaoyeye/article/details/6627901

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天工作室放假，睡个懒觉，竟然梦见头发掉光光了，吓得我马上起来干活了

今天继续学习javascript 主要是学了一些变量作用域方面的问题，记笔记的方法基本和上次一样都在代码中了

废话少说直接上代码，代码中间的注释，就算是笔记啦～～～

/*============================================================================
#     FileName: ex4.js
#         Desc:	Test 2 for javascript 
#       Author: baobaoyeye
#        Email: bao.renyi@gmail.com
#     HomePage: http://karloo.com
#      Version: 0.0.1
#   LastChange: 2011-07-23 14:04:44
#      History:
#===========================================================================*/
//基本类型值 和 引用类型值

/*
基本类型值保存在栈中，引用类型值保存在堆中
复制的过程基本类型值和引用类型值不同，一个是直接复制，一个是复制指针
typeof 和 instanceof
*/

function fun1(){
	//基本类型值不能任意添加属性，引用类型值可以任意添加属性
	var person = new Object();
	person.name = "baobaoyeye";
	document.getElementById("fun1show1").value = person.name;

	var name = "baobaoyeye";
	name.age = 12;
	document.getElementById("fun1show2").value = name.age;
}

function fun2(){
	//两种类型值的copy问题
	var num1 = 12;
	var num2 = num1;
	num1 = 13;
	document.getElementById("fun2show1").value = num1;
	document.getElementById("fun2show2").value = num2;

	var o1 = new Object();
	var o2 = o1;
	o1.name = "baobaoyeye";
	document.getElementById("fun2show3").value = o1.name;
	document.getElementById("fun2show4").value = o2.name;

}

//两种类型的值都是通过按值方式传递参数的
//不要因为引用类型值的参数传递看起来有点怪异就说它是按照引用传递的参数
//记住：两种类型值都是按照值的方式传递参数的！！！

function addTen(num){
	num += 10;
	return num;
}

function fun3(){
	var ans = 10;
	var ans1 = addTen(ans);
	document.getElementById("fun3show1").value = ans;
	document.getElementById("fun3show2").value = ans1;
}

function getName(obj){
	obj.name = "baobaoyeye";
}

function fun4(){
	var o1 = new Object();
	getName(o1);
	document.getElementById("fun4show1").value = o1.name;
}

function getName1(obj){
	obj.name = "baobaoyeye";
	obj = new Object();
	obj.name = "baobaoyeye1";
}

function fun5(){
	var o1 = new Object();
	getName1(o1);
	document.getElementById("fun5show1").value = o1.name;
}

//引用类型值的类型检测

function fun6(){
	var v1 = "baobaoyeye";
	var v2 = 12;
	var v3 = true;
	var v4 = undefined;
	var v5 = null;
	var v6 = new Object();

	alert("v1_type = "+typeof(v1)+
		  "\nv2_type = "+typeof(v2)+
		  "\nv3_type = "+typeof(v3)+
		  "\nv4_type = "+typeof(v4)+
		  "\nv5_type = "+typeof(v5)+
		  "\nv6_type = "+typeof(v6));
	var o1 = new Object();
	var a1 = new Array();
	alert("o1_type = Object "+(o1 instanceof Object)+
		"\na1_type = Array "+(a1 instanceof Array)+
		"\na1_type = Object "+(a1 instanceof Object)+
		"\no1_type = Array "+(o1 instanceof Array)+
		"\nv1_type = Object "+(v1 instanceof Object));

}

//作用域的问题

function fun7(){
	var myName = "baobaoyeye";
	function changeName(){
		if(myName == "baobaoyeye"){
			myName = "baobaoyeye1";
		}else{
			myName = "baobaoyeye";
		}
	}
	changeName();
	document.getElementById("fun7show1").value = myName;
}

function fun8(){
	var myName = "baobaoyeye";
	function changeName(){
		var myFirstName = "yeye";
		function FisrtToMy(){
			var tmpName = myFirstName;
			myFirstName = myName;
			myName = tmpName;
		}
		FisrtToMy();
	}
	changeName();
	document.getElementById("fun8show1").value = myName;
}

//作用域的扩展使用with()

function fun9(){
	function test(){
		var extend = "?id=1and 1=1";
		with(location){
			var url = href + extend;
		}
		return url;
	}
	var result = test();
	document.getElementById("fun9show1").value = result;
}

//木有块级作用域

function fun10(){
	if(true){
		var name = "baobaoyeye";
	}
	document.getElementById("fun10show1").value = name;

	for(var i = 0;i < 10; i++){
		name +="baobaoyeye";
	}
	document.getElementById("fun10show2").value = i;
}

下面就是对应的html代码啦！多实验几次就会了～～～现在这些还多很基础，我也是个菜菜

<!--==========================================================================
#     FileName: ex4.htm
#         Desc: Test 2 for javascript === html 
#       Author: baobaoyeye
#        Email: bao.renyi@gmail.com
#     HomePage: http://karloo.com
#      Version: 0.0.1
#   LastChange: 2011-07-23 14:05:07
#      History:
#==========================================================================-->
<html>
<head>
<title>I am a javascript test</title>
<script type="text/javascript" src="ex4.js" defer="defer"></script>
</head>
<body>
<div>
<input type="button" value="fun1" οnclick="fun1()" />
<input type="text" id="fun1show1" value="" />
<input type="text" id="fun1show2" value="" />
</div>
<div>
<input type="button" value="fun2" οnclick="fun2()" />
<input type="text" id="fun2show1" value="" />
<input type="text" id="fun2show2" value="" />
<input type="text" id="fun2show3" value="" />
<input type="text" id="fun2show4" value="" />
</div>
<div>
<input type="button" value="fun3" οnclick="fun3()" />
<input type="text" id="fun3show1" value="" />
<input type="text" id="fun3show2" value="" />
</div>
<div>
<input type="button" value="fun4" οnclick="fun4()" />
<input type="text" id="fun4show1" value="" />
</div>
<div>
<input type="button" value="fun5" οnclick="fun5()" />
<input type="text" id="fun5show1" value="" />
</div>
<div>
<input type="button" value="fun6" οnclick="fun6()" />
</div>
<div>
<input type="button" value="fun7" οnclick="fun7()" />
<input type="text" id="fun7show1" value="" />
</div>
</body>
<div>
<input type="button" value="fun8" οnclick="fun8()" />
<input type="text" id="fun8show1" value="" />
</div>
<div>
<input type="button" value="fun9" οnclick="fun9()" />
<input type="text" id="fun9show1" value="" />
</div>
<div>
<input type="button" value="fun10" οnclick="fun10()" />
<input type="text" id="fun10show1" value="" />
<input type="text" id="fun10show2" value="" />
</div>
</html>

baobaoyeye

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记 2

今天工作室放假，睡个懒觉，竟然梦见头发掉光光了，吓得我马上起来干活了今天继续学习javascript 主要是学了一些变量作用域方面的问题，记笔记的方法基本和上次一样都在代码中了废话少说直接上代码，代码中间的注释，就算是笔记啦～～～/*======================
复制链接

扫一扫