2018-11-20 面向对象

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

2018-11-20 面向对象
PHP全栈学习笔记8
PHP全栈学习笔记8
总结.Net基础知识——献给即将入坑的同行们（一期）
面向对象基础
20-OOP类与对象
JavaScript面向对象核心知识归纳
面向对象（未完成）
面向对象：创建对象&继承
面向对象

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.面向对象：对象：黑盒子 Math（abs random ceil floor） Date Object...
PHP全栈学习笔记8
面向对象的基本概念，面向对象编程，oop，面向对象，面向对象的分析，面向对象的设计，面向对象的编程，什么是类。类...
PHP全栈学习笔记8
面向对象的基本概念，面向对象编程，oop，面向对象，面向对象的分析，面向对象的设计，面向对象的编程，什么是类。类...
总结.Net基础知识——献给即将入坑的同行们（一期）
什么是面向对象面向对象OO = 面向对象的分析OOA + 面向对象的设计OOD + 面向对象的编程OOP；通俗...
面向对象基础
面向对象编程包括：面向对象的分析（OOA）面向对象的设计（OOD）面向对象的编程实现（OOP）面向对象思想...
20-OOP类与对象
面向对象 Object Oriented 学习面向对象：XXOO 面向对象的学习：面向过程和面向对象的区别：面...
JavaScript面向对象核心知识归纳
面向对象概念面向对象就是使用对象。面向对象开发就是使用对象开发。面向过程就是用过程的方式进行开发。面向对象是...
面向对象（未完成）
面向对象标签（空格分隔）：面向对象第一章：面向对象（上）什么叫面向对象面向过程、面向对象、两者区别构造...
面向对象：创建对象&继承
博客内容：什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承什么是面向对象面向对象...
面向对象
了解什么是面向对象首先，我们学习面向对象，要了解什么是面向对象，面向对象的重要概念：类，对象。面向对象提出的这...