JavaScript高级加强

JavaScript高级加强
1.课程介绍
1. 面向对象;(掌握)
2. 原型对象;(掌握)
3. 回调函数; (掌握)
4. 匿名函数; (掌握)
5. 闭包; (掌握)
6. jquery事件机制、委派 (了解)
7. jquery事件命名空间 (了解)
8. jQuery扩展(了解)
9. jQuery简单插件(了解)
10.jQuery自定义插件datagrid(了解)

JavaScript:简称js,它是用来程序改进设计,比如验证表单,js它是脚本语言, 无需编译,直接放到浏览器解析运行,
js也是基于对象和事件驱动编程语言。

2.JavaScript面向对象
2.1.一切皆对象
 JavaScript中一切皆对象,在JavaScript中我们可以把任何(基本数据)类型当成对象来使用。
比如var num = 3.14159;我们可以调用Number对象上面的toFixed(2)方法来进行小数位的截取。这点于Java中既然不同,Java中的基本数据类型是不能调用方法,只能通过包装类型。
基本数据类型:number/boolean/string/null(值:null)/undefined(undefined)
引用数据类型:Object/Array/Regexp/Date/Number/Boolean/String…

//基本数据类型中number.
var num1 = 3.14159;
console.debug(num1.toFixed(2)); //一切皆对象
console.debug(typeof num1);//number

//引用数据类型Number
var num2 = new Number(3.14159);
console.debug(num2.toFixed(2));
console.debug(typeof num2);//object

2.2.js中true和false的判断
js 中所有值的真假性: 0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.

var b1 = false;
if(b1){
console.debug(“这里不能被执行”);
}
//js 中所有值的真假性: 0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.
var b2 = new Boolean(false);
if(b2){
console.debug(“会输出…”);
}
2.3.简单操作
三部曲:
创建对象
给对象添加属性和方法
操作对象的属性和方法
4.3.1创建对象
var obj = new 类();
json: var json={};
4.3.2添加属性/方法
obj.name = “张三”;
obj[“age”] = 18;//使用[],那么需要使用引号
obj.say = function(){
console.debug(this.name);
}
4.3.3删除属性
delete obj.name;
delete obj[“age”];
4.3.4迭代/遍历对象成员
for(var key in obj){
console.debug§;//key为对象的属性名或者函数名字。
//要调用,需要动态调用,把key当做一个动态的变量,使用[]方式
if (typeof jsonObj[p] == ‘function’) {
jsonObjkey;//函数的调用需要有()
} else {
console.debug(jsonObj[key]);
}
}
2.4.JSON对象和JSON字符串
标准的json字符串格式:’{“key”:“value”,“key”:“value”}’// key必须使用双引号,值如果不是数字和boolean类型的也必须双引号
JSON字符串和JSON对象转换有三种方式:
eval表达式:表达式中必须添加()字符串,通过jsonStr.toSource()方法,查看对象源码,发现就有()
window.JSON.parse(jsonStr):必须是标准的json字符串
$.parseJSON(jsonStr):查看jQuery源码,发现jQuery底层就是采用JSON.parse方法,所以也必须是标准的Json字符串( 源码7495行)

//标准的字符串:'{"key":"value","key":"value"}'//value如果不是数字和boolean,必须使用""

//var jsonStr = ‘{“name” : “王天霸”,“age” : 16,“sex” : “男”}’;//json字符串
var jsonStr = ‘[{“name” : “王天霸”,“age” : 16,“sex” : “男”},{“name” : “张天霸”,“age” : 26,“sex” : “女”}]’;//json数组字符串
//json字符串和json对象的转换
//三种方式
//1、eval表达式:表达式中必须添加()字符串,通过jsonStr.toSource()方法,查看对象源码,发现就有()
var jsonObj = eval("("+jsonStr+")");
console.debug(jsonObj);

var jsonObjTest = {};
console.debug(jsonObjTest.toSource());//({})

//2、window.JSON.parse(jsonStr):必须是标准的json字符串,否则会报很经典的错误。key必须使用双引号,值如果不是数字和boolean类型的也必须双引号
 var testStr = window.JSON.parse(jsonStr);
 console.debug(testStr);
 
//3、$.parseJSON(jsonStr):查看jQuery源码,发现jQuery底层就是采用JSON.parse方法,所以也必须是标准的Json字符串  
var $jsonObj = $.parseJSON(jsonStr);
console.debug($jsonObj);

2.5.Js类
JavaScript中没有为我们提供像Java中定义类的关键字class。
JS中定义类只需要定义这个类的构造函数即可,函数名使用首字母大写。

构造函数与普通函数没区别.
只要是类,类名就是首字母大写。

//定义了一个类的构造函数
function User(name,age){
	//构造函数中this,就是实例对象		
	//如果要为对象添加属性,那么需要使用 "this.属性名 = 值;"
	this.name = name;
	this.age = age;
	
	this.getName = function(){
		return this.name;
	};
}

//通过new创建 实例对象.
var u1 = new User("李豆子",18);
console.debug(u1.getName());

var u2 = new User("小小",18);
console.debug(u2.getName());

2.6.对象属性/方法拷贝
有两种方式:
逗逼方式:一个个属性和方法一一赋值
通过遍历,一次性赋值。最好通过hasOwnProperty()来判断是否已经存在这个属性或者方法,避免原有的属性或者方法被覆盖
//对象属性和方法的拷贝

var obj1 = {
name : "gg",
address : "yyy",
age :  "18",
sex : "man"

};

var obj2 = {
	name : "mm",
	sex : "woman"
};

//拷贝属性 - > 逗逼方式
/* obj2.address = obj1.address;
obj2.age = obj1.age;
obj2.sex = obj1.sex; */

//拷贝属性
for(var key in obj1){
	//判断obj2中是否存储这个属性.
	if(!obj2.hasOwnProperty(key)){
		obj2[p] = obj1[p];  //obj2["address"] = obj1["address"];   p = "address"	
	}
}	

console.debug(obj2);

2.7.函数也是对象
4.7.1函数也是对象,可以当做对象new一个函数
定义的第二种方法:new关键字
var add =new Function(“a”,“b”,“return a+b”);
console.debug(add(1,2));//3
4.7.2对象,就可以赋值属性
函数的name属性是只读属性,不能修改

//对象,则可以添加属性
add.age=17;
add.name=“我是new出来的。。。”;
console.debug(“age=”+add.age);//17
console.debug(“name=”+add.name);//不是“我是new出来的。。。”,因为函数的name属性是一个只读属性,不能修改
4.7.3 window的name属性
我们说过,变量要先定义才能使用。但是name是一个特殊的,可以当成java中关键字。直接使用name表示是使用的window.name属性。默认window.name是空字符串。但是我们可以给这个name赋值。
console.debug(window);

console.debug(name);//(空字符串) 这个name,我们没有定义就使用,本应该要报错的,但是记住name是window上的属性,表示window.name.默认是name是没有值的,所以空字符串
name = “我是window的”;
console.debug(window.name);//我是window的,
2.8.js中的this
4.8.1 this:谁调用,就指向谁
this使用场景:对函数或方法所在的那个对象(函数也是对象)进行操作;

var obj1 = {
	"name" : ""
};
function sayHello() {
	return this.name;//谁调用这个方法sayHello,this就代表是谁
}
obj1.say = sayHello;//赋值
console.debug(obj1.say());//达康书记 sayHello是obj1对象在调用,所以this指向了obj1.

console.debug(sayHello());//空字符串 直接调用sayHello,相当于是window.sayHello(),所以this指向window,默认的window的name是空字符

4.8.2修改函数中的this指向
4.8.2.1使用场景
场景:一般后面写代码很少修改函数中this,面试可能被问到,看jQuery源码。
函数也是对象,函数对象中存在两个特别有趣的方法,可以修改this。
函数对象是Function,看源码:

4.8.2.2实现修改函数的this功能
 call(thisObject,args1,args2…)//第一个参数,是调用对象;第2-n个参数是函数需要的参数,一个个的写
  apply(thisObject,[args1,args2])//第一个参数,是调用对象,第2个参数是函数需要的参数,是一个数组
  call,apply区别:第一个参数都是指函数运行时的this,也就是说,第一个参数是我们期望this指向的那个对象;call从第二参数开始都为调用函数的参数,而apply,第二个参数为一个数组,该数组就是调用函数的所有参数。
//this表示,谁调用这个方法,this就指向谁。
function sayHello() {
console.debug(arguments);
return this.name;//谁调用这个方法sayHello,this就代表是谁
}

//修改this对象
//call(thisObject,arg1,arg2)
//apply(thisObject,[rg1,arg2])

var obj2 = {"name":"陈海"};//我想再调用sayHello的方法,但是sayHello方法window上的,通过call方法修改this的指向为obj2
console.debug(sayHello.call(obj2,"高老板","陈海"));
var obj3 = {"name":"高老板"};//我想再调用sayHello的方法,但是sayHello方法window上的,通过call方法修改this的指向为obj3
console.debug(sayHello.apply(obj3,["高老板","高书记"]));

2.9.小结
1 普通类型也可以调用方法
2 null,””,0,NaN,undefined,false都是false,其它的是true(注意new Boolean)
3 创建对象,添加修改删除属性
obj.属性名 == obj[“属性”] delete obj.属性名
for…in 遍历所有属性
4 JSON eval必需加(),JSON.parse/$.parseJSON 必需是标准格式
5 构造函数就是一个类,也是一个普通方法(首字母必需大写)
6 属性拷备:hasOwnProperty 判断对象是否有这个属性
7 函数也是对象(函数上可以进行属值添加)
函数的name属性是只读的(函数名)
window中也有name属性,可以修改(close)
8 this:谁调用,this就指向谁
咱们可以改变this的指向:call,apply
语法 : 方法.call(obj,arg1,arg2);
方法.apply(obj,[arg1,arg2])

使用JSON.parse方法或者$.parseJSON方法时候,如果不是标准的json字符串的错误:

3.prototype原型
3.1.什么是prototype
prototype-使您有能力向对象添加属性和方法(原类型)
Javascript中的每一个对象都有一个prototype属性(proto),这个属性是一个引用,这个引用指向对象的原型。对象的实例由两部分组成:
对象的自定义属性部分(就是我们的构造函数中定义的属性)
对象原型部分,原型也是一个对象,指向对象类型的原型。
可以通过console.dir()来查看对象的目录组成结构。
function User(name, age) {
this.name = name;
this.age = age;
}
var zs = new User(“zs”,17);
console.dir(zs);
var ls = new User(“ls”,18);
console.dir(ls);

3.2.原型共享
5.2.1同一个类的各个实例的原型__proto__是相等的
对象的实例有自定义部分和原型部分两部分组成。我们说过,原型部分__proto__是一个引用,指向这个类的原型。原型部分也是一个对象,而且同一类型的多个实例的原型指向是一样的。
function User(name, age) {
this.name = name;
this.age = age;
}

var zs = new User("zs",17);
var ls = new User("ls",18);

console.debug(zs.proto==ls.proto);//true
5.2.2同一个类的各个实例的原型(proto)共享
既然同一个对象的各个实例的原型(proto)是相等的,那么我们就可以扩展原型,来统一扩展各个实例对象的属性。

3.3.对象属性访问过程
对象访问属性时首先会在对象自定义属性部分查找,如果自定义属性部分存在那么就使用;
如果没有找到,那么就会到这个对象的原型部分(__proto__对象)查找,如果能找到就使用,
如果没有找到,那么就会在这个对象的原型部分的原型部分查找对应的属性;

3.4.原型使用
JS对象属性访问过程为:先从对象自定义区域查找属性,如果有就使用,如果没有就到对象的原型区域中进行查找,并且原型区域可被多个对象共享使用,所以我们可以往原型对象上面添加属性或方法, 就相当于往对象上面添加了属性或方法。
5.5.1原型共享
function User(name, age) {
this.name = name;
this.age = age;
}

var zs = new User("zs",17);
var ls = new User("ls",18);

//原型共享
//需求:zs和ls对象上都没有一个方法叫eat,现在使用原型扩展这个方法,使zs和ls都能拥有这个方法
//原型共享是在对象上的,自身也是一个对象,所以可以直接增加一个属性 static 修改方法 可以修改字段
User.prototype.eat = function(name){console.debug("我:"+name+"要开吃了")};
zs.eat(zs.name);
ls.eat(ls.name);

5.5.2对象属性的访问过程
function sayName(){
console.debug(this.name);
}
function User(name, age) {
this.name = name;
this.age = age;
this.sayName = sayName;
}

var zs = new User("zs",17);
var ls = new User("ls",18);

//原型共享
//需求:zs和ls对象上都没有一个方法叫eat,现在使用原型扩展这个方法,使zs和ls都能拥有这个方法
//原型共享是在对象上的,自身也是一个对象,所以可以直接增加一个属性
User.prototype.sayName = function(name){console.debug("我:"+name+"要开吃了")};
zs.sayName(zs.name);
ls.sayName(ls.name);

说明首先找到了自定义中的sayName方法,而没有使用我们的原型中的方法。

注:其实这些方法的扩展我们可以写在构造方法中,为什么要使用原型共享呢?
一般是先写构造方法,当我们完成业务代码到一定阶段的时候,突然发现需要扩展一个功能,这个时候,不建议去修改原有的代码,使用原型共享
有些时候,需要扩展一些系统的类的功能,我们改不了,使用原型共享。
3.5.总结
在一个类中加上原型方法,它对应的所有对象都拥有了这个方法
类.prototype.方法名 = function(){}
原型共享:多个对象只要类相同,它们的原型也是相同的
对象调用属性方法的顺序 (自定义->原型->原型的原型,…)
什么情况下会用到原型:
代码到了一定程序,不建议修改原来的代码功能,使用原型为所有相应对象扩展功能
js的很多原生对象功能不够,可以使用原型进行扩展
4.回调函数
回调函数就是一个通过函数(对象)引用调用的函数;
如果你把函数的引用(地址)作为参数传递给另一个函数,当这个引用被用来调用其所指向的函数时,我们就说这是回调函数。
//添加了一个定时器,延迟3秒后做事情
//表示等3秒后,就是满足3秒钟这个条件,调用我的函数,执行:console.debug(100000)
setTimeout(function(){
console.debug(100000)
}, 3000);
// 上面使用的是回调函数也是匿名函数
// 下面就把匿名函数改为有名字的函数
//该函数等time毫秒后执行一段代码.
function delayDo(){
console.debug(“我是你的回调哦。。。。”);
}

//表示等3秒后,就是满足3秒钟这个条件,调用我的函数,执行:console.debug(100000)
setTimeout(function(){delayDo()}, 3000);

//==============================================================

jQuery的回调:
function callBackErrorFn() {
//请求失败后调用的回调函数
console.debug(“我回来了,loser!!!”);
}

function callBackSuccessFn() {
	//请求成功后调用的回调函数
	console.debug("我回来了,嘿嘿。。。");
}
$.ajax({
	url : "http://www.baidu.com",
	type : "GET",
	data : "",
	error :function(){
		//请求失败后回调函数
		callBackErrorFn()
	},
	success : function(){
		//请求成功后回调函数
		callBackSuccessFn()
	}
});

5.匿名函数
一般这种函数作为参数进行传递到某一个函数中或者是赋给其他变量。
匿名函数作用:还可以包含一段代码,然后直接调用执行,避免产生全局变量。
匿名函数三种写法:

三种写法:
(function(){})//推荐写法
~function(){}
+function(){}

var x = 10;
var y = 50;
var result = x*y;
console.debug(result);
console.debug(window)
//定义一个属性默认是在window上的,所以这里的x,y,result都是在window上,是一个全局变量。当我使用完x,y,result
//后,不再使用的时候。这样会造成一个作用域的污染。

//2、解决方法:我们可以搞一个匿名函数,将这个功能包裹起来,这样变量就只在我的函数里存在

//3、什么是匿名函数?就是没有名字的函数
//正常函数
function sayName(name) {
	console.debug("请说出你的名字:" + name);
}

//匿名函数
function(name){
	console.debug("请说出你的名字:" + name);
}

//正确写法:使用()括起来:
// (function(name){
// console.debug(“请说出你的名字:” + name);
// })//这样就表示申明了一个函数,只是说是一个匿名函数。但是还没有调用

//直接调用匿名函数:函数的调用:函数名();
(function(name) {
	console.debug("请说出你的名字:" + name);
})();//现在是调用了,但是没有传参数
(function(a, b) {
	var result = a * b;//用一个局部变量接收
	window.result = result;//赋值给window的一个全局变量
})(10, 50);//传参调用
console.debug(result);
console.debug(window);

//匿名函数当成一个参数传递
setTimeout(function(){
console.debug(“aaaaaaaaaaaaaaa”);
},1000);

jQuery的源码就是这样写出来的

6.闭包
闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性
闭包第一种用法:
var msg = “呵呵”;
function sayMsg(){
//函数中可以使用函数之外定义的变量。
console.debug(msg);
}
sayMsg();

闭包第二种用法:通过闭包实现只读属性
//实现一个计数器功能
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上,是一个全局变量,需要缩小作用域,我们可以使用匿名函数,而且需要只读,可以使用闭包,闭包+匿名函数就可以实现计数器功能。
(function(){
var id=1;
window.getId = function(){
return id++;
}
})();

console.debug(getId());
console.debug(getId());
console.debug(getId());
id=1; // 夸张的修改ID的计数器!!
console.debug(getId());
console.debug(getId());

请看面试题(下来之后去看一下)
结果分析:
 var name = “The Window”;
  var object = {
    name : “My Object”,
    getNameFunc : function(){
alert(“1:”+this);
      return function(){
alert(“2:”+this);
        return this.name;
      };
    }
  };
alert(object.getNameFunc()());

var name = “The Window”;
  var object = {
    name : “My Object”,
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };
  alert(object.getNameFunc()());

function Hello(){
alert(“Hello”);
}
Hello();
functionHello() {
alert(“Hello World”);
}
Hello();

7.jQuery事件机制回顾和加强
7.1.JS是什么
JavaScript最重要的一个机制,事件驱动。
监听器listener
jQuery:(js优秀的框架)
监听的目标是什么(事件源):
监听的操作是什么 (事件名称):
触发监听时要做什么(事件响应函数)
事件中所有信息封装成的对象(事件对象):
7.2.操作:事件注册
jQuery提供了多种事件注册的方式,简化了我们开发,并且兼容各种浏览器。 jQuery2.X放弃(SB IE6,7,8)。常见的事件注册有三种方式
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").click(fun…("#btn").bind(‘click’,function() // jQuery对象.bind unbind取消绑定
$("#btn").on(‘click’,function() // jQuery对象.on off取消绑定
简单方式

on方法注册事件
$(function(){
//注册点击事件
$("#btn").on(“click”,function(){
console.debug(“你点击了我。。。”);
});
//移除点击事件
$("#btn").off(“click”);
})
bind方法绑定事件

7.3.事件委托
是什么
前面的基本的事件绑定,在功能有一个局限。就是绑定事件的元素,必须是在绑定的时候已知的、存在的。对于以后出现的元素是不起作用,事件委托就可以处理这种情况。
实现
有这么一个需求,已经存在一个添加附件的组件,现在因为需求原因,需要动态增加多个添加附件的组件,同时增加删除,查看等操作。如图:

需要对删除、查看等方法实现事件绑定功能。因为删除、查看这些是动态添加的,前面的常规方法是不行的,需要使用我们的事件委托。

7.3.1.常规操作

Insert title here

})

添加更多附件
附件:

7.3.2.事件委托

Insert title here

// $(“a.delete”).bind(“click”,function(){
// console.debug(“我被删除了”);
// })
//2、事件委托 live(type, [data], fn): jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效
//但是这个是委托在body上,一层层的找,效率低下,已经被delegate替换掉
//3、delegate,可以指定dom范围查找符合条件的元素,效率高:delegate(selector,[type],[data],fn)
// $("#userForm").delegate(“a.delete”,“click”,function(){
// 表示指定在id=userForm的元素中找class=”delete”的a标签,
// console.debug(“我被删除了”);
// })

//4、底层实现都是使用的on方法,看jQuery源码:
// delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn );}
$("#userForm").on(“click”,“a.delete”, function() {
console.debug(“我被删除了”);
})
})

添加更多附件
附件:
7.3.3.事件委托小结 事件委托可以为还没有出现的元素绑定事件。 三种方式: live,从body上开始匹配元素,但是效率低下,1.7开始,官方就建议使用高效的delegate方法来替换,1.9开始都已经删除这个方法。 delegate:可以指定匹配的dom范围,可以替换旧版本中的live方法 on:其实源码发现,他们都是用on实现的,搞定on,就可以搞定一切,推荐使用:事件委托的格式:this.on( types, selector, data, fn ); 不是事件委托,普通注册事件的on方法: 普通绑定事件:on(events,[selector],[data],fn)

8.jQuery事件命名空间
8.1.是什么
命名空间可以有效地管理同一事件的不同监听器。就是说命名空间可以更加细致的过滤需要增加事件监听的事件源,用来做区分的。简单理解命名空间就是一串字符串。
请看下面例子
8.2.使用
语法:事件名称.命名空间。 click.btn1

有一个按钮,可能同时绑定了两个点击事件,做出不同的响应。但是在某种情况下,就需求取消其中一个事件的绑定,就使用命名空间来进行区分。
$(function(){
$("#btn1").on(“click.bt1”,function(){
console.debug(“你点了我了”);
})

	$("#btn1").on("click.bt2",function(){
		console.debug("你居然又来点我了。。");
	})
	
	$("#btn1").off("click.bt1");//取消.bt1命名空间的点击事件
	
});

9.jQuery继承(扩展)
9.1.为什么需要继承(扩展)
虽然jQuery的功能还是比较全的,但是有时候我们需要一些个性化的功能,所以说我们需要来掌握一下,jQuery的扩展。
9.2.jQuery功能的扩展
要想给jQuery对象进行功能扩展,就应该在原型prototype上扩展。搜索源码:发现:
jQuery源码:就是在扩展原型jQuery.fn = jQuery.prototype=$.fn.
扩展分为单一扩展(一次扩展一个功能)和连续扩展 一次有多个功能。

Insert title here

$(“div”).setHtml(“我的div内容改变了…”);
})

div内容

10.简单jQuery插件

11.jQuery自定义插件datagrid
显示表格数据的插件
11.1.效果

11.2.准备JSON数据
Data.json:

[
{
“id”:1,
“username”:“admin”,
“password”:“62efb964427b82a243c4fb11c628f986”,
“tel”:“100001”,
“email”:"admin1@qq.com",
“age”:20,
“headImage”:"/avatars/avatar1.png"
},
{
“id”:2,
“username”:“admin2”,
“password”:“e9f128d79283d54b1eb25f23b1c17b5a”,
“tel”:“100002”,
“email”:"admin2@qq.com",
“age”:20,
“headImage”:"/avatars/avatar2.png"
},
{
“id”:4,
“username”:“admin4”,
“password”:“63eac0108bbcfd82f5a8ed69e7299496”,
“tel”:“100004”,
“email”:"admin4@qq.com",
“age”:50,
“headImage”:"/avatars/avtar3.png"
},
{
“id”:5,
“username”:“admin5”,
“password”:“1c7406e47313a524a9efb0cc3c4700ed”,
“tel”:“100005”,
“email”:"admin5@qq.com",
“age”:20,
“headImage”:"/avtars/avtars5.png"
},
{
“id”:6,
“username”:“admin6”,
“password”:“940d91aa62e73615e7e9a30b7c058060”,
“tel”:“100006”,
“email”:"admin6@qq.com",
“age”:20,
“headImage”:"/avtars/avtars1.png"
},
{
“id”:8,
“username”:“admin8”,
“password”:“51016840c4310d71afe84974f567f82e”,
“tel”:“100008”,
“email”:"admin7@qq.com",
“age”:40,
“headImage”:"/avtars/avtars1.png"
},
{
“id”:9,
“username”:“admin9”,
“password”:“2c5178244be630742a35b3f851495f6f”,
“tel”:“100009”,
“email”:"admin8@qq.com",
“age”:20,
“headImage”:"/avtars/avtars1.png"
},
{
“id”:10,
“username”:“admin10”,
“password”:“ed91500191005f7843190aa1a2b814ad”,
“tel”:“1000010”,
“email”:"admin10@qq.com",
“age”:20,
“headImage”:"/avtars/avtars1.png"
},
{
“id”:11,
“username”:“admin11”,
“password”:“8ad812c7e52a6c8811c0da9bd479fd7b”,
“tel”:“1000011”,
“email”:"admin11@qq.com",
“age”:20,
“headImage”:"/avtars/avtars1.png"
},
{
“id”:12,
“username”:“admin12”,
“password”:“8b7c045a3c23077628f271c3cbb1ebd9”,
“tel”:“1000012”,
“email”:"admin12@qq.com",
“age”:30,
“headImage”:"/avtars/avtars2.png"
}
]

11.3.步骤1,属性id,username是写死的

问题点:属性id,username是写死的
编号用户名
11.4.步骤2,年龄,头像 不能额外处理 以下代码不能把大于25岁的年龄标红,头像不能显示(只有路径),部门名称显示不了 问题点:年龄,头像 额外处理不行
编号用户名密码邮箱年龄头像
11.5.步骤3,判断age,headImage都是写死的 if("age"==field && data[i][field]>25){ tr += "" + data[i][field] + ""; }else if("headImage"==field){ tr += " "; } else{ tr += "" + data[i][field] + ""; } 11.6.步骤4,最终版本 最终版
编号用户名密码邮箱年龄头像

https://www.cnblogs.com/humin/p/4556820.html

继承实现方式:关键就是原型链
Student.prototype.proto = User.prototype;
面试题1

//1.调用了2次函数
//2.第1步执行object.getNameFunc()返回是什么?匿名函数
// function(){
//      return function(){
//        return that.name;
//      };
// }
// 2.第2步执行执行第1步的函数:object.getNameFunc()()
console.debug(object.getNameFunc()());
面试题2

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值