JS高级总结

1、对象

js一切都是对象,包括基本类型 和引用类型 ,函数,平时使用比较多,只是把引用类型看成对象

1.2ture和false

js在里的false:0,"",undefined,NaN,null,false,除开这几个,全部是true了

1.3对象的创建

var obj = new Object();

var obj1 = {"age":20}

var obj2 = new Person();

1.4添加属性/方法

obj.age = 18;

obj.name = "药家鑫"

obj.say = function(){

console.log("世风日下")

}

obj2.name = "波哥";

obj2["role"]="教育大师"


1.5删除属性

delete obj2["role"];

console.log(obj2);


1.6对象的遍历

要调用,需要动态调用,把p当做一个动态的变量,使用[]方式

function Person(){

var obj1={}

obj1.name = "歌神周泓旭"

obj1.age = 18;

obj1.role = "歌手"

obj1.doShow = function(){

console.log("小文超级抠门")

}

for(var key in obj1){

if(typeof obj1[key]=="function"){

obj1[key]();

}else{

console.log(obj1[key])

}

}


2 JSON对象和JSON字符串

标准的json字符串格式:'{"key":"value","key":"value"}'// key必须使用双引号,值如果不是数字和boolean类型的也必须双引号

JSON字符串和JSON对象转换有三种方式:

[if !supportLists]Ø [endif]eval表达式:表达式中必须添加()字符串,通过jsonStr.toSource()方法,查看对象源码,发现就有()

[if !supportLists]Ø [endif]window.JSON.parse(jsonStr):必须是标准的json字符串

[if !supportLists]Ø [endif]$.parseJSON(jsonStr):查看jQuery源码,发现jQuery底层就是采用JSON.parse方法,所以也必须是标准的Json字符串(源码7495行)

var jsonObj = eval("("+jsonStr+")");

console.log(jsonObj)

var jsonObj1 = JSON.parse(jsonStr)

console.log(jsonObj1)

var jsonObj2 = $.parseJSON(jsonStr  console.log(jsonObj2)

2.1json类操


//定义了一个类的构造函数

function User(name,age){

//构造函数中this,就是实例对象

//如果要为对象添加属性,那么需要使用 "this.属性名 = 值;"

this.name = name;

this.age = age;

this.getName = function(){

return this.name;

};

}

//通过new创建 实例对象.

var u1 = new User("姚明",50);

console.debug(u1.getName());

var u2 = new User("小明",30);

console.debug(u2.getName());


2.2对象属性/方法拷贝

[if !supportLists]Ø [endif]通过遍历,一次性赋值。最好通过hasOwnProperty()来判断是否已经存在这个属性或者方法,避免原有的属性或者方法被覆盖

for(var key in obj1){

if(!obj2.hasOwnProperty(key))

obj2[key] = obj1[key]

}

3函数对象

函数里面name这个属性,比较特殊,他是可读的属性,不能进行修

window的name属性

变量要先定义才能使用。但是name是一个特殊的,可以当成java中关键字。直接使用name表示是使用的window.name属性。默认window.name是空字符串。但是我们可以给这个name赋值。

4 this

this:谁调用,就指向谁

修改函数中的this指向

call(thisObject,args1,args2...)//第一个参数,是调用对象;第2-n个参数是函数需要的参数,一个个的写

  apply(thisObject,[args1,args2])//第一个参数,是调用对象,第2个参数是函数需要的参数,是一个数组

  call,apply区别:第一个参数都是指函数运行时的this,也就是说,第一个参数是我们期望this指向的那个对象;call从第二参数开始都为调用函数的参数,而apply,第二个参数为一个数组,该数组就是调用函数的所有参数。

5 prototype原型

prototype-可以向对象添加属性和方法(原类型)

Javascript中的每一个对象都有一个prototype属性(__proto__),这个属性是一个引用,这个引用指向对象的原型。对象的实例由两部分组成:


原型共享

同一个类的各个实例的原型(__proto__)是相等的

var user1 = new User('小王',18);

console.dir(user1);

var user2 = new User('小李',5);

console.dir(user2);

console.log(user1.__proto__ === user2.__proto__)

对象属性查找规则,先从自定义的属性上面找,如果找到,就返回,如果没有,从原型上面去找


6回调函数

回调函数就是一个通过函数(对象)引用调用的函数;

如果你把函数的引用(地址)作为参数传递给另一个函数,当这个引用被用来调用其所指向的函数时,我们就说这是回调函数

setTimeout(doHandle,3000);

function doHandle(){

alert(1111);

}

alert(1);

7匿名函数

写法

(function(){

alert(1);

})();

~function(){

alert(2);

}();

+function(){

alert(3);

}();

8闭包

闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性

闭包第一种用法:函数中可以使用函数之外定义的变量。

var result = 0;

  function getRes(){

  result++;

  return result;

  }

  console.debug(getRes());

  console.debug(getRes());

  console.debug(getRes());

//  result=2;

  console.debug(getRes());

  console.debug(getRes());

//result可以被外界修改,我们是想不能修改,只能计数,因为result的范围在window上,是一个全局变量,需要缩小作用域,我们可以使用匿名函数,而且需要只读,可以使用闭包,闭包+匿名函数就可以实现计数器功能。


9事件委托

前面的基本的事件绑定,在功能有一个局限。就是绑定事件的元素,必须是在绑定的时候已知的、存在的。对于以后出现的元素是不起作用,事件委托就可以处理这种情况。

$(function(){   

$("#addFile").click(function(){

$("#userForm").append("

附件:删除
")

})

$("#userForm").on('click','a.delete',function(){

alert('111111111111');

})

})

10命名空间

命名空间可以有效地管理同一事件的不同监听器。就是说命名空间可以更加细致的过滤需要增加事件监听的事件源,用来做区分的。简单理解命名空间就是一串字符串。

$(function(){

$("#myBtn").on('click.btn1',function(){

alert('111');

});

$("#myBtn").on('click.btn2',function(){

alert('222');

});

$("#myBtn").off('click.btn2');

})



11  java继承:体现在子类和父类之间,子类可以继承父类里面的属性和方法

继承:jquery的继承:可以扩展功能

jquery想实现继承:可以通过prototype


 jQuery.fn == jQuery.prototype == $.fn

 

12自定义插件

创建方法获得 路径

$("#dg").datagrid({

"url":"data.json"

});


做判断获取值

$(function(){

//自定义的表格插件的方法

$.fn.datagrid = function(obj){

var url = obj.url;//data.json

//获取表格

var table = $("#dg");

var ths = table.find("tr th");

console.log(ths);

//ajax请求

$.get(url,function(data){

//循环出来 每一个行数据

for(var i=0;i

//行

var row = data[i];

var content = "";

//列

for(var j=0;j

//获取每一个列 id  username

var th = ths[j];

//编号 id username。。。

var field = $(th).attr("field");

var funName = $(th).attr("format");//id null

var filedValue = row[field];

if(!funName){

content += ""+filedValue+"";

}else{

content += ""+window[funName](filedValue)+"";

}

}

content += "";

table.append(content);

console.log('----------------------')

/*var id = row.id;

var username = row.username;

table.append(""+id+""+username+"")*/

}

})

}


处理年龄

//处理年龄的方法

function ageFormat(value){

if(value != null && value != "" && value > 20){

return ""+value+""

}else{

return value;

}

}

判断头像

//表示头像

function headImage(value){

if(value != null && value != ""){

return "";

}else{

return "没有头像";

}

}

打印头


编号 用户名 密码 联系方式 电子邮件 头像 年龄

你可能感兴趣的:(JS高级总结)