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

2018-11-20 面向对象

作者: 满天繁星_28c5 | 来源:发表于2018-11-20 20:59 被阅读0次
    1.面向对象：

    对象：黑盒子 Math（abs random ceil floor） Date Object
    盖楼房：调用具有某些功能的人来实现某些功能。
    对象是一个整体，对外提供一些功能和属性。
    使用对象时只关注对象的提供的功能，不关注对象的内部实现。
    OOP | OO
    面向对象：
    创建者：
    使用者：

    • 面向对象的特点：（封装，继承，多态）
      抽象：就是建模，抓住核心问题。
      封装：
      使用者：不必考虑内部实现，只考虑内部提供的功能。
      创建者：考虑好对外提供的功能，实现内部的代码。
      继承：
      从已有的对象上继承出新的对象，新对象具有了老对象的一些功能和特性。
      多重继承：
      沙发 汽车（带轮子的沙发）
      盒子
      汽车 集装箱货车
      多态：龙生九子

    • 对象的组成：
      属性：属于对象的变量
      方法：属于对象的函数

    • eg：1.属性
      let: console.log(window.a); //undefined window是全局作用域而let只可以执行块级作用域
      效果如下：


      属性1.jpg

      var:


      属性2.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
/*
 let a = 10;
console.log(a);     //10
console.log(window.a);  //undefined  window是全局作用域而let只可以执行块级作用域
*/
var a = 10;
console.log(a);     //10
console.log(window.a);      //10

var arr = new Array(12,13,51,36);
arr.a=100;
console.log(arr.a++);
console.log(arr.a);
</script>
</body>
</html>

    • eg:1.方法
      效果如下：


      方法.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    function say(){
        //属于一个全局变量，是一个自由函数，函数。
        console.log('hello word');
    }
    var arr = new Date();
    arr.say = function(){
        console.log('hello date');
        console.log(window )
        //事件函数
        /*div.onclick = function(){

        }*/
    }
        say();
        arr.say();

</script>

</body>
</html>

    • eg:3/oop
      效果如下：


      oop.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
var obj = new Object();
// 属性
obj.name = 'lihaoshuang';
obj.weight = '56kg';

//方法
obj.getName = function(){
    console.log('猪的名字：'+this.name);
}
obj.getWeight = function(){
    console.log('猪的体重:'+this.weight);
}
obj.getName();
obj.getWeight();

var obj2 = new Object();
//属性
obj2.name = 'zhangs';
obj2.weight = '90kg';
//方法
obj2.getName = function(){
    console.log('猪的名字：'+this.name);
}
obj2.getWeight = function(){
    console.log('猪的体重：'+this.weight);
}
obj2.getName();
obj2.getWeight();
</script>
</body>
</html>

    • eg:4.function
      效果如下：


      function.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
function makeStu(name,weight){
    var obj = new Object();
    //属性
    obj.name = name;
    obj.weight = weight;

    //方法
    obj.getName = function(){
        console.log('我的名字叫：'+this.name);
    }
    obj.getWeight = function(){
        console.log('我的体重是：'+this.weight);
    }
    return obj;
}
var obj1 = makeStu('limao','100kg');
obj1.getName();
obj1.getWeight();
var obj2 = makeStu('lihaoshung','90kg');
obj2.getName();
obj2.getWeight();

console.log(obj1.getName ===obj2.getName)
</script>
</body>
</html>

    eg:4function 面向对象写法
    效果如下：


    面向对象写法.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
function MakeStu(name,weight){
    // var obj = new Object();
    //属性
    this.name = name;
    this.weight = weight;
    //return this;
}

//方法
MakeStu.prototype.getName = function(){
    console.log('我的名字叫：'+this.name);
}
MakeStu.prototype.getWeight = function(){
    console.log('我的体重是：'+this.weight);
}
var obj1 = new MakeStu('limao','100kg');
obj1.getName();
obj1.getWeight();
var obj2 =new  MakeStu('lihaoshung','90kg');
obj2.getName();
obj2.getWeight();

console.log(obj1.getName ==obj2.getName)
</script>
</body>
</html>

    this： 95%
    每一个函数都具有自己的调用对象。
    函数的调用者就是this。
    事件：触发事件的对象
    div.onclick = function(){
    alert(this);
    };

    Date 时间
    Array 数组
    RegExp 正则
    Math 数学

    Object 对象 没有功能
    是所有js对象的父级。

    2.面向过程

    面向过程：
    过程：过程就是面向函数式编程。function，前面所学的所有的代码的形式都是面向过程。

    面向对象与面向过程的区别：
    • 面向过程：
      优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源; 比如单片机、嵌入式开发、 Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
      缺点：没有面向对象易维护、易复用、易扩展
    • 面向对象：
      优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可 以设计出低耦合的系统，使系统 更加灵活、更加易于维护
      缺点：性能比面向过程低
    3.原型（prototype）：什么是原型：

    一个函数可以看成一个类，原型是所有类都有的一个属性，原型的作用就是给这个类的每一个对象都添加一个统一的方法。
    原型就是能够统一的给多个对象添加属性或者方法。
    类： 模板 人类 在JS中一般称为对象
    对象：创建出来的具体的实例 张三 在JS中一般称为对象实例

    css
    .con{
    background:red;
    }

    <div class="con"></div>
    <div class="con"></div>
    <div class="con"></div>
    <div class="con"></div>
    <div class="con"></div>
    <div class="con"></div>

    • eg：5.new
      效果如下：


      new.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
function show(){
    alert(this);    //thid获取的是window
}
show();
new show();
</script>
</body>
</html>

    • eg:6.new
      效果如下：


      new1.jpg
    new2.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
//工厂方法创建对象
function makeStu(name,weight){
    //参数就是原型
    //加工
    var obj = new Object();
    //属性
    obj.name = name;
    obj.weight = weight;

    //方法
    obj.getName = function(){
        console.log('猪的名字叫：'+this.name)
    }
    obj.getWeight = function(){
        console.log('猪的体重是：'+this.weight)
    }
    //出厂
    return obj;
}
var obj1 = makeStu('limao','162kg');
obj1.getName();
obj1.getWeight();
var obj2 = makeStu('zhangsaj','95kg');
obj2.getName();
obj2.getWeight();
console.log(obj1.getName==obj2.getName)
</script>
</body>
</html>

    • eg:7.选项卡
      效果如下：


      选项卡1.jpg
      选项卡2.jpg
      选项卡3.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            width:50px;
            height:50px;
            margin:20px;
        }
        .active{
            background:skyblue;
        }
        div div{
            width:200px;
            height:200px;
            border:2px solid #ccc;
            display:none;
            background:red;
        }
    </style>
</head>
<body>
<div id="tab">
    <button class="active">第一</button>
    <button>第二</button>
    <button>第三</button>
    <div style="display:block">1111111111</div>
    <div style=" background:yellow">2222222222</div>
    <div style=" background:blue">3333333333</div>
</div>
</body>
<script>
let con = document.getElementById('tab');
let button = con.getElementsByTagName('button');
let div = con.getElementsByTagName('div');
for(let i=0;i<button.length;i++){
    button[i].index=i;  //设置一个index
    button[i].onclick = function(){
        for(let j=0;j<button.length;j++){//清空button
            button[j].className='';     //当点击按钮后清空button从新定义
            div[j].style.display='none';
        }
        this.className='active';
        div[this.index].style.display='block';
    }
}
</script>
</html>

    • eg:8面向对象选项卡
      效果如下：


      选项卡1.jpg
    选项卡2.jpg 选项卡3.jpg 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            width:80px;
            height:40px;
            margin:50px;
        }
        .active{
            background: yellow;
        }
        div div{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            display: none;
        }

    </style>
</head>
<body>
<div id="tab">
    <button class="active">diyi</button>
    <button>dier</button>
    <button>disan</button>
    <div style="display: block">dqw</div>
    <div>safsd</div>
    <div>gfhrt</div>
</div>
</body>

<script>

function Tab(id){
    _this = this;  //此处的_this重点"_"是因为被赋值了
    this.con = document.getElementById(id);
    this.button = this.con.getElementsByTagName('button');
    this.div = this.con.getElementsByTagName('div');

    for(let i=0;i<this.button.length;i++){
        this.button[i].index = i;
        this.button[i].onclick = this.fclick;//将this.button[i].onclick赋值给this.fclick
    }
}


Tab.prototype.fclick = function(){
    for(let j=0;j<_this.button.length;j++){
        _this.button[j].className = '';//当点击按钮后清空button从新定义
        _this.div[j].style.display = 'none';
    }
    this.className = 'active';
    _this.div[this.index].style.display = 'block';
}
new Tab('tab');
</script>
</html>

    相关文章

      网友评论

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

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

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

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

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

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

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

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