2018-11-20 面向对象

2018-11-20 本文已影响0人满天繁星_28c5

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;
}

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 面向对象

1.面向对象：

2.面向过程

面向对象与面向过程的区别：

3.原型（prototype）：什么是原型：

猜你喜欢

热点阅读