JavaScript学习笔记（一）

作者: 细碎光芒 | 来源:发表于2020-07-23 11:29 被阅读0次

Javascript面向对象

1. 面向对象编程介绍

1.1 两大编程思想

面向过程 & 面向对象

1.2 面向过程

面向过程编程 POP(Process-oriented programming)：

面向过程就是分析出解决问题所需的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

举个栗子：将大象装进冰箱，面向过程的做法。

1.打开冰箱

2.把大象装进去

3.关上冰箱门

1.3 面向对象

面向对象编程 OOP(Object-oriented programming):

面向对象是把事务分解成一个个对象，然后由对象之间分工合作完成。

举个栗子：将大象装进冰箱，面向对象的做法。

1.大象对象

进去

2.冰箱对象

打开

关闭

3.使用大象和冰箱的功能

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

1.封装性

2.继承性

3.多态性

1.4 面向过程和面向对象的对比

面向过程	面向对象
优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用面向过程的编程	优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，是系统更灵活、更易于维护
缺点：没有面向对象易维护、易复用、易扩展	缺点：性能比面向过程低

举个栗子：

面向过程写出来的程序就像是一份蛋炒饭，面向对象写出来的程序就像是一份盖浇饭

2. 类和对象

面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事务，但是事务分为具体的事务和抽象的事务。

手机：抽象的（泛指的）

下面手机的图片：具体的（特指的）

phone.png

面向对象的思维特点：

1.抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）

2.对类进行实例化，获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断创建对象、使用对象，指挥对象做事情

2.1 对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人，可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

2.2 类 Class

在ES6中新增了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类（class）

对象特指某一个，用过实例化一个具体的对象

2.3 创建类

语法：

class name {
    // class body
}

创建实例：

var xx = new name();

注意：类必须使用new实例化对象

2.4 类constructor构造函数

constructor()方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor()

2.5 类添加方法

语法：

class Person {
    constructor (name, age) {  // constructor 构造器或者构造函数
        this.name = name
        this.age = age
    }
    say() {
        console.log(this.name + '你好')
    }
}

例子:

// 1. 创建类 class  创建一个明星类
class Star {
    constructor (name， age) {
        this.name = name
        this.age = age
    }
    sing(song) {
        console.log(this.name + '唱' + song)
    }
}
// 2. 利用类创建对象
var ldh = new Star('刘德华', 18)
var zxy = new Star('张学友', 20)
console.log(ldh.name)
console.log(zxy.name)
ldh.sing('冰雨')
zxy.sing('李春兰')

//(1) 通过class关键字创建类，类名我们还是习惯性定义首字母大写
//(2) 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象
//(3) constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自耦当生成这个函数
//(4) 生成实例new不能省略
//(5) 注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function
//(6) 多个函数方法之间不需要添加逗号分隔

3. 类的继承

3.1 继承

现实中的继承：子承父业，比如我们都继承了父亲的姓。

程序中的继承：子类可以继承父类的一些属性和方法。

语法：

class Father { // 父类
}
class Son extends Father { // 子类继承父类
}

例子:

// 1.类的继承
class Father { // 父类
    constructor() {}
    money() {
        console.log(100)
    }
}
class Son extends Father { // 子类继承父类
}
var son = new Son()
son.money()

结果：

例子：

class Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    sum() {
        console.log(this.x + this.y) // 这里的this指向的是父类的this
    }
}
class Son extends Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
var son = new Son(1, 2) // new Son(1,2)的参数传给的是子类的constructor
son.sum() // 子类的参数没有传给父类，所有父类中的sum所指向的this.x和this.y此时没有值

结果：

VM657:12 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new Son (<anonymous>:12:9)
    at <anonymous>:16:11

3.2 super关键字

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

还是刚才那个例子，稍作改动：

class Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    sum() {
        console.log(this.x + this.y)
    }
}
class Son extends Father {
    constructor(x, y) {
        // this.x = x
        // this.y = y
        super(x, y) // 调用了父类中的构造函数
    }
}
var son = new Son(1, 2)
var son1 = new Son(11, 22)
son.sum()
son1.sum()

结果：

3
33

super调用父类中的普通函数

// super关键字调用父类中的普通函数
class Father {
    say() {
        return '我是爸爸'
    }
}
class Son extends Father {
    say() {
        // console.log('我是儿子')
        console.log(super.say() + '的儿子') // 输出：我是爸爸的儿子
        // super.say() 就是调用父类中的普通函数 say()
    }
}
var son = new Son()
son.say()
// 继承中的属性或者方法查找原则：就近原则
// 1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类
// 2.继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）

子类继承父类加法方法，同时扩展减法方法

class Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    sum() {
        console.log(this.x + this.y)
    }
}
// 子类继承父类加法方法，同时扩展减法方法
class Son extends Father {
    constructor(x, y) {
        // 利用super 调用父类的构造函数
        // super必须在子类this之前调用
        super(x, y)
        this.x = x
        this.y = y
        // super(x, y) // 如果super在子类this之后，就会报错，报错结果见下文
    }
    subtract() {
        console.log(this.x - this.y)
    }
}
var son = new Son(5, 3)
son.subtract()
son.sum()

报错的结果：

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new Son (<anonymous>:13:9)
    at <anonymous>:22:11

结果：

2
8

<strong style="color:red;font-weight:400;">注意：子类在构造函数中使用super，必须放到this前面（必须先调用父类的构造方法，再使用子类的构造方法）</strong>

3.3 ES6中类和对象的三个注意点

三个注意点：

在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
类里面的共有属性和方法一定要加this使用
类里面的this指向问题，constructor里面的this指向实例对象，方法里的this指向这个方法的调用者

<html>
<head>
</head>
<body>
    <button>点击</button>
</body>
<script>
var that
var _that
// var ldh = new Star('刘德华')
// ldh.sing() // 会报错：Star is not defined
class Star {
    constructor(name, age) {
        // constructor里面的this 指向的是 创建的实例对象
        that = this
        console.log(this)  // 结果是 ldh的Star对象
        
        this.name = name
        this.age = age
        // sing() // 会报错：sing is not defined
        // this.sing() // 实例化Star时一定会调用constructor构造函数，所以调用方法放这里就会自动被调用到
        this.btn = document.getSelector('button')
        // btn.onclick = sing  // 会报错,这里的btn和sing前面都需要加this
        // this.btn.onclick = this.sing()  // this.sing加小括号会立即被调用，而我们要实现的效果是点击后再调用
        this.btn.onclick = this.sing
    }
    sing() {
        // console.log(name) // 会报错：name is not defined
        // 这个sing里面的this指向的是btn这个按钮，因为btn调用了这个函数
        // console.log(this.name) // 结果是undefined
        console.log(that.name) // that里面存储的是constructor里面的this
    }
    dance() {
        // 这个dance里面的this指向的是实例对象ldh, 因为ldh调用了这个函数
        _that = this
        console.log(this)
    }
}
var ldh = new Star('刘德华')
// ldh.sing()
console.log(that === ldh) // 结果为true
ldh.dance()
console.log(_that === ldh) // 结果为true

// 1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
// 2.类里面的共有属性和方法一定要加this使用
// 3.类里面的this指向问题,constructor里面的this指向实例对象，方法里的this指向这个方法的调用者
</script>
</html>

4. 面向对象案例

面向对象版Tab栏切换

功能需求：

点击Tab栏可以切换效果
点击+号可以添加Tab项和内容项
点击*号可以删除当前的Tab项和内容项
双击Tab项文字或内容项文字，可以修改里面的文字内容

抽取对象：Tab对象

该对象具有切换功能
该对象具有添加功能
该对象具有删除功能
该对象具有修改功能

大致结构如下：

class Tab {
    constructor() {
        
    }
    // 1.切换功能
    toggleTab() {}
    // 2.添加功能
    addTab() {}
    // 3.删除功能
    removeTab() {}
    // 4.修改功能
    editTab() {}
}
new Tab()

完整的栗子：

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
</head>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

    <script src="js/tab.js"></script>
</body>

</html>

style.css

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
  src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
  url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
  url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-guanbi:before {
  content: "\e676";
}

tab.css

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}

tab.js

var that;
class Tab {
    constructor(id) {
        // 获取元素
        that = this;
        this.main = document.querySelector(id)
        this.add = this.main.querySelector('.tabadd')
        // li的父元素
        this.ul = this.main.querySelector('.fisrstnav ul:first-child')
        // section 父元素
        this.fsection = this.main.querySelector('.tabscon')
        this.init()
    }
    init() {
            this.updateNode()
            // init 初始化操作让相关的元素绑定事件
            this.add.onclick = this.addTab
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i
                this.lis[i].onclick = this.toggleTab
                this.remove[i].onclick = this.removeTab
                this.spans[i].ondblclick = this.editTab
                this.sections[i].ondblclick = this.editTab

            }
        }
        // 因为我们动态添加元素 需要从新获取对应的元素
    updateNode() {
            this.lis = this.main.querySelectorAll('li')
            this.sections = this.main.querySelectorAll('section')
            this.remove = this.main.querySelectorAll('.icon-guanbi')
            this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
        }
        // 1. 切换功能
    toggleTab() {
            // console.log(this.index)
            that.clearClass()
            this.className = 'liactive'
            that.sections[this.index].className = 'conactive'
        }
        // 清除所有li 和section 的类
    clearClass() {
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].className = ''
                this.sections[i].className = ''
            }
        }
        // 2. 添加功能
    addTab() {
            that.clearClass()
            // (1) 创建li元素和section元素 
            var random = Math.random()
            var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
            var section = '<section class="conactive">测试 ' + random + '</section>'
            // (2) 把这两个元素追加到对应的父元素里面
            that.ul.insertAdjacentHTML('beforeend', li)
            that.fsection.insertAdjacentHTML('beforeend', section)
            that.init()
        }
        // 3. 删除功能
    removeTab(e) {
            e.stopPropagation() // 阻止冒泡 防止触发li 的切换点击事件
            var index = this.parentNode.index
            console.log(index)
            // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
            that.lis[index].remove()
            that.sections[index].remove()
            that.init()
            // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
            if (document.querySelector('.liactive')) return
            // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
            index--
            // 手动调用我们的点击事件  不需要鼠标触发
            that.lis[index] && that.lis[index].click()
        }
        // 4. 修改功能
    editTab() {
        var str = this.innerHTML
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
        // alert(11)
        this.innerHTML = '<input type="text" />'
        var input = this.children[0]
        input.value = str
        input.select() // 文本框里面的文字处于选定状态
        // 当我们离开文本框就把文本框里面的值给span 
        input.onblur = function() {
            this.parentNode.innerHTML = this.value
        }
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e) {
            if (e.keyCode === 13) {
                // 手动调用表单失去焦点事件  不需要鼠标离开操作
                this.blur()
            }
        }
    }

}
new Tab('#tab')