美文网首页
JS高级总结

JS高级总结

作者: 观潮n | 来源:发表于2019-07-19 01:28 被阅读0次

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>

相关文章

  • 一些高级js用法

    最近在学习js,总结了一些高级js用法

  • JS高级总结

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

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • javaScript引用类型之Array

    总结Array常用的18个api 栈方法(LIFO数据结构--last in first out ...

  • DOM

    以下内容总结自《js高级程序设计 第三版》 今天来说说JS中的DOM以及DOM操作。 DOM是什么,做了什么? D...

  • JS笔记001(JS的组成、数据类型)

    内容归纳总结自《JavaScript高级程序设计》 1. JS的组成 1.ECMAScript核心 解释器2.D...

  • 函数表达式

    以下内容总结自《JS高级程序设计》第三版 什么是函数表达式? 函数表达式,是JS中定义函数的一种方式。在JS中,共...

  • JS高级

    JS高级 原型 函数高级 对象高级 本地存储 cookie localStorage sessionStorage...

  • Js高级程序设计你不知道的那些事儿

    写在开头: 为了学习方便,js程序分成两个阶段学习,JS初级和js高级阶段,js高级有很多需要理解的概念,重在理解...

  • 面向对象五

    面向对象高级二 总结 PHP 里的面向对象、继承方式 JS 里的继承方式 call(构造函数伪装) 和 proto...

网友评论

      本文标题:JS高级总结

      本文链接:https://www.haomeiwen.com/subject/cgedlctx.html