2018-11-20 面向对象

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.22 08:17:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,504评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,434评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,089评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,378评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,472评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,506评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,519评论 3赞 413
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,292评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,738评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,022评论 2赞 329
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,194评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,873评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,536评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,162评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,413评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,075评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,080评论 2赞 352

2018-11-20 面向对象

1.面向对象：

2.面向过程

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

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

推荐阅读更多精彩内容