美文网首页
2018-11-21 面向对象2

2018-11-21 面向对象2

作者: 满天繁星_28c5 | 来源:发表于2018-11-22 20:04 被阅读0次

    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>

    相关文章

      网友评论

          本文标题：2018-11-21 面向对象2

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2018-11-21 面向对象2|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！