首页 > 代码库 > js高级
js高级
js高级
0级dom事件
<input type=button onclick="alert(js代码)"
这样其实生成了一个function onclick(event)方法把其中js包起来了
0级dom事件
.onclick=function(){
alert("one");
}
通过标签选择到dom元素,所以要放在标签加载之后
执行,一个是放到哦onload里面一个是放到尾巴
2级dom事件
.addeventlistener("click",function(){
alert("one");
})
.addeventlistener("click",function(){
alert("two");
})
绑多个事件不会覆盖,冒泡和捕获,先捕获后冒泡
5种基本数据类型
undefined\null\boolean\number\string
变量创建未赋值,undefined有一个值就是undefined
null 空对象指针没有值
var foxmale=true;//boolean布尔值
var foxage=123 ;//js中不分浮点整形不拉不拉,全部都是number
var foxnam="小二黑";字符串string
值类型
1种复杂类型
object
var fox=new object();//创建对象
fox.age=18;//fox["age"]=18;一样的效果但是 []的优点是可以通过
变量来动态访问属性
delete fox.age;//实用delete关键字删除自定义属性
// JSON.stringify(fox);把对象转成json格式
JSON.parse() 把json转成对象
eval//将json格式字符串转成js对象,但是要注意两边
加上"()";
//eval方法可以动态执行js代码
可以把字符串转换成js代码,在调用的位置执行
js引擎,碰到了eval方法,就会解析里面的字符串,在调用的位置
把js方法放进去。像是一个自定义click事件
//检查数据类型typeof运算符
alert(typeof fxnam);
//--值类型不能动态添加属性
var foxname="bigying";
var foxname1= foxname.concat("erdan");
alert(foxname1);
浏览器干的事
var foxname=new string("bigying");
var foxname1=foxnam.concat("erdan");
foxname1.tostring();
alert(foxname1);
包装对象三大包装对象
var mstring =new string ();//string包装对象
var mnum=new number();
var bbool=new boolean();
string 包装对象的常用方法
.trim();
.slice()分割
.split()
数组是object包装对象
push往原数组尾部添加新的元素,返回长度
pop 尾部元素删掉,返回删掉的元素
unshift:头部追加新元素,返回长度
shift:头部删除元素,返回删除的那个元素
<script type="text/javascript">
var numArr = [];
numArr.push(1);
numArr.push(2);
numArr.push(3);
numArr.push(4);
alert(numArr);
//先进先出---队列
var numStr = "";
//注意:数组长度在变
for (var i = 0; i < 4; i++) {
numStr += numArr.shift();
}
//alert(numStr);
//后进先出---堆栈
for (var i = 0; i < 4; i++) {
numStr += numArr.pop();
}
alert(numStr);
</script>
function函数
//声明式函数
function sayhi(){}
//函数表达式(匿名)
var sayhi2=function(){}
浏览器会优先加载声明式函数,保证在任何位置都可以调用的到
函数表达式,执行到函数表达式才会拥有这个函数变量
-------------函数类型
var water=new function("name","age","alert()");
water("bigying",18);
-------------arguments是方法的局部变量保存了传入的实参
function eatfood(){
arguments[0]......
}
用于模拟实现方法的重载。。。。所以js中定义方法
没必要定义形参,因为根本木有用。
如果需要判断传入的参数类型,需要配合typeof
-------------获取函数本身----------------------
arguments.callee 可以获取函数本身
function jiechengnum(num){
if(num<=1)
{
return 1;
}
else{
//优化,在内部通过这个调用自身,
避免了在外面被改变覆盖
return num*arguments.callee(num-1);
}
}
--------------this----------
方法中的this是可以动态改变的
实用方法对象的.call调用()第一个参数是希望改变的this
sayhi.call(对象,参数)
this就不是谁点就是谁,而是第一个参数的
区别是参数是数组
.apply(对象,[参数])
-------------length------
函数对象的length属性可以获取定义形参个数
-------------工厂--------
function Createpeople(name,age)
{
var c=new object();
c.name=name;
c.age=age;
return c;
}
-------------构造函数模式----
function People(name,age,mehtod)
{
this.name=name;
this.age=age;
this.method=method;
}
var people1=new people("bigying",24,function(){"alert
(bigying)"});//构造函数模式----
var people2=new people("bigying",24,function(){"alert
(bigying)"});//构造函数模式----
此时两个对象的method方法不和c#一样在一个方发表。
而是在各自地址
-------------原型模式------------像公共父类一样
此时用原形来提起公共属性吧共有的属性提到方法的原型中
实用构造函数创建的对象,都共享原型里面的属性
function People(name,age)
{
this.name=name;
this.age=age;
}
//存进去method到people的prototype里
people.prototype.method =function(){alert (123);};
var people1=new people("bigying",24);
var people2=new people("erdan",24);
people1.method
-------------继承-----------
function dog(name,age){
this.name=name;
this.age=age;
}
var dog1 =new dog("牧羊犬",10);
function smalldog(name,age,milk)
{
dog.call(this,name,age);//这里用call改变了this指向,本来是谁
点就是谁,此处应该是dog的,但是call了之后,this变成了第一个参数的对
象,这里就是smalldog1,因此dog里面的构造函数的this发生了改变,这样就
实现了继承
this.milk=milk;
}
var smalldog1=new smalldog("茶犬",0.1,"三鹿");
-------------作用域---------
function setName(o)
{
o.name = "lihong";//对应到了c
o = new Object();//新的对象指向新的地址
o.name = "james";//给新对象的name属性
局部的,结束之后干掉了
}
var c = new Object();
setName(c);
alert(c.name);
----------------没有块级作用域
//以方法为单位的作用域,出了方法失效
---------------闭包跟作用域链-----
指有权可以访问另外一个函数内部的局部变量,这就是闭包
延长局部变量的生命周期
实际运用,window.onload中的局部变量方法可以多次调用
js高级