2018-11-21 面向对象2
2018-11-22 本文已影响0人
满天繁星_28c5
eg：1tab
效果如下:
tab1.jpg
tab2.jpg
tab3.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
button{
width:50px;
height:50px;
margin:50px;
}
.active{
background:skyblue;
}
div div{
width:300px;
height:300px;
border:2px solid #ccc;
background:#ddd;
display:none;
}
</style>
</head>
<body>
<div id="tab">
<button class="active">第一</button>
<button>第二</button>
<button>第三</button>
<div style="display:block">11111111111</div>
<div style="background:blue">222222222222</div>
<div style="background:#d11235">33333333333</div>
</div>
<div id="tab1">
<button class="active">第一</button>
<button>第二</button>
<button>第三</button>
<div style="display:block">11111111111</div>
<div style="background:blue">222222222222</div>
<div style="background:#d11235">33333333333</div>
</div>
</body>
<script>
function Tab(id){
// 初始化
this.con=document.getElementById(id);
this.button = this.con.getElementsByTagName('button');
this.div = this.con.getElementsByTagName('div');
//保存了现场的this
let obj = this;
for(let i=0;i<this.button.length;i++){
this.button[i].index = i;
this.button[i].onclick = function(){//事件内部this发生了变化。this变成了按钮
obj.fclick(this);
};
}
}
Tab.prototype.fclick = function(bt){
// this指Tab
for(let j=0;j<this.button.length;j++){
this.button[j].className = '';
this.div[j].style.display='none';
}
// 用到按钮的this
bt.className='active';
this.div[bt.index].style.display = 'block';
};
new Tab('tab');
new Tab('tab1');
</script>
</html>
1.json：（字符串）
数据传输格式
eg：json
效果如下：
json.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
let json = {
"name":"zhangsan",
"age":95,
"getName":function(){
console.log(this.name);
}
};
//适用于只有一个对象的场景
//单体对象
console.log(JSON.stringify(json));
</script>
</html>
2.XML：
可扩展笔记语言
json 对象：
json字符串解析出来的对象。或者就是个对象。但是这个对象有限制。键必须是双引号包起来。值必须是简单类型或者数组。
3.prototype 原型:原型也是一个对象，里面是所有加在对象原型上的方法以及属性。
eg：3prototype
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
Object.prototype.name = function(){
console.log('a');
};
let obj = new Object();
let obj1 = new Object();
obj.name();
obj1.name();
obj1.name = function(){
console.log('b');
};
obj.name();
obj1.name();
</script>
</html>
this
eg：4this
效果如下：
this.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function s(){
console.log(this);
}
s(); //s()作用的是全局作用域window
</script>
</html>
eg：5this
效果如下：
this1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
let obj = new Object();
obj.func= function(){
console.log(this); //对象本身
}
obj.func();
</script>
</html>
eg：6this
效果如下：
this2.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function Tab(){
console.log(this);
return{a:"a"};
}
Tab() //Tab()作用的是全局作用域window
var obj = new Tab() //Tab
console.log(obj);
</script>
</html>
如果构造函数中具有return语句，并且return返回的是一个对象，那么构造函数产生的对象就是返回的这个对象。而不是构造函数的本身实例。
call：
eg：7call
效果如下：
call.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function s(a,b){
console.log(this,a,b);
}
s(1,3); //s(1,3);定义的是全局作用域window
s.call(new Date(), 3,6); //Wed Nov 21 2018 22:27:40 GMT+0800 (中国标准时间) 3 6
s.apply(new Array,[1,4]); //Array(0) 1 4
s.apply(); //Window undefined undefined
</script>
</html>
apply：
4.闭包：
函数的作用域是定义的地方，而不是函数调用的地方。
eg：8闭包
效果如下：
闭包1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
let a = 1000;
function t(){
let a =20;
this.jia = function(){
console.log(++a);
}
}
var tt = new t();
tt.jia();
</script>
</html>
eg：9闭包
效果如下：
闭包2.jpg
闭包2.1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*function t(){
var a = 10;
return function(){
console.log(++a);
}
}
var a = 1000;
var tmp = t();
tmp();//11
*/
function t(){
var a =10;
return;
}
var a= 1000;
var tmp =function(){
console.log(++a);
}
tmp(); //1001
</script>
</html>
5.继承：
属性的继承使用 call（this）；
eg：10继承
效果如下：
继承.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function A(){
this.name = 'lidubus';
this.age = 18;
}
A.prototype.sss = 'sss';
A.prototype.func = function(){
console.log(this.name);
}
A.prototype.func1 = function(){
console.log(this.age);
}
function B(){
A.call(this); //修改A的this，相当于A；里面的属性是给B添加的。
}
// B.prototype=A.prototype; // 应用类型
for(let m in A.prototype){
B.prototype[m] = A.prototype[m];
}
let a = new A();
let b = new B();
console.log(B.prototype);
console.log(A.prototype);
B.prototype.finc1=function(){
console.log(1);
}
b.func();
a.func1();
</script>
</html>
6.js的数据类型分为 简单类型与复杂类型（引用类型）：
简单类型：
数字
字符串
布尔值
undefined
null
引用类型：
数组
对象
这两种数据类型保存数据的形式是不同的。
7.instanceof 判断某一个实例对象是否是某一个对象的实例。
obj instanceof Object
任何实例都是Object的实例。
eg：12数组赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
let a =[1,2,3];
let b =[];
for(var i in a){
b.push(i);
}
console.log(a);
console.log(b);
b.push(8);
console.log(a);
console.log(b);
let arr = [1,2,3];
let arr1 =[...arr]; //将arr解构赋值给arr1
arr1.push(8);
console.log(arr);
console.log(arr1);
</script>
</html>
eg：12instanceof
效果如下：
instanceof.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//数组的实例
let a = new Array();
console.log(a instanceof Number);
function Say(name){
this.name = name;
}
let s = new Say();
console.log(s instanceof Say);
</script>
</html>
eg：13物体拖拽事件
效果如下：
物体拖拽事件（起点）.jpg
物体拖拽事件（终点）.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background:skyblue;
position:absolute;
}
</style>
</head>
<body>
<div id="move"></div>
</body>
<script src="Drag.js"></script>
<script>
new Drag('move');
</script>
</html>
eg：14有范围的物体拖拽事件（当物体到某个范围时会被动停下）
效果如下：
有范围的拖拽（起点）.jpg
有规定范围的拖拽（终点）.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background:skyblue;
position:absolute;
}
</style>
</head>
<body>
<div id="move"></div>
</body>
<script src ="Drag.js"></script>
<script>
function LimitDrag(id){
Drag.call(this,id);
}
for(let a in Drag.prototype){
LimitDrag.prototype[a] = Drag.prototype[a];
}
//重学
LimitDrag.prototype.mousemove = function(ev){
let l = ev.clientX - this.x;
let t = ev.clientY - this.y;
if(l<0){
l=0
}else if(l>window.innerWidth - this.d.offsetWidth){
l = window.innerWidth - this.d.offsetWidth;
}
if(t<0){
t=0
}else if(t>window.innerHeight - this.d.offsetHeight){
t= window.innerHeight-this.d.offsetHeight;
}
this.d.style.left = l +'px';
this.d.style.top=t+'px';
};
new LimitDrag('move');
</script>
</html>
