写自己的代码之js狂想曲
一些未用过的写法、
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prototype的探索</title>
<script type="text/javascript">
<!-- 普通函数 this 代表window-->
var ftn = function(){
//this.style.backgroundColor = '#000000';
this.name = 'shangguanls';
alert(this);
alert(this.name);
return function(){
alert('first');
return this;
}
}
ftn()();
function listerFtn(target){
//额，target是指onclick传进来的this,指的是监听函数所在的元素中
alert(target);
//如果在这里写this含义又是不同，因为jsp中仅仅是调用该函数，仅仅当个普通函数的this代表的是window
this.name = 'shangguanls';
alert(this);
alert(this.name);
return function(){
alert('second');
return this;
}
}
listerFtn();
<!-- 下面代码未解决-->
function func(){
alert('cc');
//额，如果没有加载进来，下面一步不会获取到元素，得到为null，body中的元素都没构建呢。
var node = document.getElementById('only');
alert(node);
alert('tt');
node.onclick = function(){
//这里的this又是代表什么呢？
alert(this);
this.name = 'shangguanls';
alert(this.name);
};
//我试试看能不能new
var temp = new onclick();
alert(temp.name);
}
<!-- 奇怪，为什么这么加了，上边的node还是获取不到？ -->
document.onload = func();
</script>
</head>
<body>
<div id='same' onclick='listerFtn(this)()'><!-- 这边调用就当在js调用吧 -->
ddd
</div>
<div id='only'>cc</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>js狂想曲</title>
<script type="text/javascript">
//js .号的使用
var fun = function(){
this.name = 'man';
}
fun.init = function(){
var sr = 'be careful,be';
alert(sr);
}
fun.init.sup = function(){
alert('watch! be careful your head');
}
fun.init.sup();
fun.init();
//this的小测试
var func = function(){
alert(this);
alert(this.variable);
this.name = 'shangguanls';
}
var method = function(){
alert(this.name); //打印shangguanls
}
func(); //这里作为普通函数调用 this 为window, 那么this.name等价于 window.name等价于全局变量 var name = '';
method();
//函数作为某个对象的方法被调用，这时this就指这个上级对象
func.prototype.variable = 'coder';
//下面打印 Object/coder
var temp = new func();//过程创建func对象，调用func()构造函数，this指的是调用该方法的func对象,所以函数里面对this操作都是对这个对象操作
//怎么样总结下：this指的是调用该函数的那个对象，只是在不同场景，调用该对象不同而已，普通函数调用可以认为是全局调用，对象自然是window
//上面是new构造函数创建变量调用，下面看个正常点的
var obj = {};
obj.variable = 'show this line';
obj.m = func;
obj.m(); //打印show this line. 说明调用func ,里面的this指的是调用它的对象，也就是obj
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>js狂想曲</title>
<script type="text/javascript">
var ftn = function(vari_1,vari_2,vari_3){
if(typeof vari_2 == 'object'){
for(var temp in vari_2){
alert(temp); //输出的是key
alert(vari_2[temp]); //输出的是value
}
}
}
var target = {
temp : '我的朋友叫马克',
copy : function(){
alert("don't stop me now");
},
variable : '我也不想输'
}
ftn('info',target,'1'); //这里缺少一个参数也是会被调用的,如ftn('info',target)
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>js狂想曲</title>
<script type="text/javascript">
var _ftn = function(name,age){ //当有个对像apply参数不够？ 按顺序赋值，不够就忽略。看来顺序很重要啊
this.name = name;
this.age = age;
this.$ = function(){
alert(name+"-"+age);
};
this.other = function(){
alert('什么都不给你,看你怎么办！');
}
}
var _method = function(name){
_ftn.apply(this,arguments); this.variable = name+"$"; //第一个参数表示改变后的对象,那么上边_ftn的this表示的是this这个对象
//这里的this 如果new的话是表示_method这个对象.如果_method()直接调用
//那么this表示window,在_method()后面加个alert(variable); 那么有值
}
var _obj = new _method("贵妃");
alert(_obj.name+"-"+_obj.age+"-"+_obj.name);//猜猜'贵妃'-'null'-'贵妃' >_< 结果'贵妃'-'undefined'-'贵妃'
_obj.$(); //_ftn有的方法我通通都要，里面有参数赋值很好，没赋值就直接undefined吧，我不介意
_obj.other();
//变换
var ftn = function(name,age){
this.name;
this.age;
}
var method = function(name,age){
this.variable = name;
this.show = function(){
alert('为什么下面变量为undefined？');
alert(this.variable); //这里this表示调用show的对象
}
}
var $ftn = new ftn('写自己的代码','3');
method.apply($ftn,{ variable : "无语，不能用argument，只能自己写"}); //不会在方法中才能用argument吧？
alert($ftn.variable); //undefined..搞不定
alert($ftn.variable); //这里为什么是undefined呢？ 上边不是将variable加入到ftn对象中了吗？
$ftn.show(); //ftn对象的variable为undefined,导致，show函数中的variable也是为undefined
var $ftn_1 = new ftn('再来','5');
alert(typeof $ftn_1.show); //undifend..
$ftn_1.show();
</script>
</head>
<body>
</body>
</html>