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("

附件:<input type='file' name='file'/><a href='javascript:void(0)' class='delete'>删除</a></div>")

})

$("#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<data.length;i++){

//行

var row = data[i];

var content = "<tr>";

//列

for(var j=0;j<ths.length;j++){

//获取每一个列 id  username

var th = ths[j];

//<th field="id">编号</th> id username。。。

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

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

var filedValue = row[field];

if(!funName){

content += "<td>"+filedValue+"</td>";

}else{

content += "<td>"+window[funName](filedValue)+"</td>";

}

}

content += "</tr>";

table.append(content);

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

/*var id = row.id;

var username = row.username;

table.append("<tr><td>"+id+"</td><td>"+username+"</td></tr>")*/

}

})

}


处理年龄

//处理年龄的方法

function ageFormat(value){

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

return "<font color='red'>"+value+"</font>"

}else{

return value;

}

}

判断头像

//表示头像

function headImage(value){

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

return "<img width='100px' height='100px' src='"+value+"'></img>";

}else{

return "没有头像";

}

}

打印头


<table id="dg" border="1">

<tr>

<th field="id">编号</th>

<th field="username">用户名</th>

<th field="password">密码</th>

<th field="tel">联系方式</th>

<th field="email">电子邮件</th>

<th field="headImage" format="headImage">头像</th>

<th field="age" format="ageFormat">年龄</th>

</tr>

</table>

<img id="myImg" src="img/5.jpg" sdsfasd="111"></img>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容