JavaScript进阶-1. 面向对象

最新推荐文章于 2022-06-02 16:15:36 发布
最新推荐文章于 2022-06-02 16:15:36 发布
阅读量616 收藏
点赞数 1
分类专栏： Javascript 文章标签： javascript js
原文链接：https://editor.csdn.net/md/?articleId=116395583
版权

一、面向对象编程

1. 两大编程思想

在这里插入图片描述

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

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
例子：将大象装进冰箱，面向过程做法
在这里插入图片描述

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

3. 面向对象编程 OOP (Object Oriented Programming)

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

例子：将大象装进冰箱，面向对象做法

先找出对象，并写出这些对象的功能：

  1. 大象对象

     进去

  2. 冰箱对象

     打开
 关闭

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

面向对象是以对象功能来划分问题，而不是步骤。

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

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

面向对象的特性：

  • 封装性
  • 继承性
  • 多态性

4. 面向过程和面向对象的对比

在这里插入图片描述
用面向过程的方法写出来的程序是一份蛋炒饭，而用面向对象写出来的程序是一份盖浇饭。

二、ES6 中的类和对象

面向对象

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

  • 抽象的(泛指的)
  • 具体的(特指的)

面向对象的思维特点:

  1. 抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
  2. 对类进行实例化, 获取类的对象

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

1. 对象

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

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

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

  • 属性：事物的特征，在对象中用属性来表示（常用名词）
  • 方法：事物的行为，在对象中用方法来表示（常用动词）

2. 类 class

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

  • 类抽象了对象的公共部分，它泛指某一大类（class）
  • 对象特指某一个，通过类实例化一个具体的对象

3. 创建类

语法:

class name {
  // class body
}

创建实例:

var xx = new name();

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

4. 类 constructor 构造函数

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

语法:

class Person {
  constructor(name,age) {   // constructor 构造方法或者构造函数
      this.name = name;
      this.age = age;
    }
}

创建实例:

var htt = new Person('胡图图', 8); 
console.log(htt.name)       

// 1. 创建类 class  创建一个 明星类
class Star {
  constructor(uname, age) {
    this.name = uname;
    this.age = age;
  }
}
// 2. 利用类创建对象 new
var htt = new Star("胡图图", 8);
var wdd = new Star("王多多", 10);
console.log(htt);	// Star {name: "胡图图", age: 8}
console.log(htt.name);	// 胡图图
console.log(wdd);	// Star {name: "王多多", age: 10}
//(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
//(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
//(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
//(4) 生成实例 new 不能省略
//(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

5. 类添加方法

语法:

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

创建实例:

var htt = new Person('胡图图', 8); 
htt.say()

注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

// 1. 创建类 class  创建一个 明星类
class Star {
    // 类的共有属性放到 constructor 里面
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    sing(song) {
        // console.log('我唱歌');
        console.log(this.uname + song);
    }
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// (1) 我们类里面所有的函数不需要写function 
// (2) 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
zxy.sing('李香兰');

三、类的继承

1. 继承

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

语法:

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

实例:

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}
class Son extends Father{  // 这样子类就继承了父类的属性和方法

}
var damao= new Son('刘');
damao.say();

2. super 关键字

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

语法:

class Person {   // 父类
      constructor(surname){
         this.surname = surname;
     }
} 
class  Student extends Person {       // 子类继承父类
     constructor(surname,firstname){
     	super(surname);		// 调用父类的constructor(surname)
		this.firstname = firstname; // 定义子类独有的属性
     }
}

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

// 1. 类的继承
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(x, y); //调用了父类中的构造函数
    }
}
var son = new Son(1, 2);
var son1 = new Son(11, 22);
son.sum();
son1.sum();

例子:

 class Father {
    constructor(surname) {
        this.surname = surname;
     }
    saySurname() {
      console.log('我的姓是' + this.surname);
    }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
    constructor(surname, fristname) {
         super(surname);   // 调用父类的constructor(surname)
         this.fristname = fristname;
     }
    sayFristname() {
         console.log("我的名字是：" + this.fristname);

    }
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();

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

class Father {
     say() {
         return '我是爸爸';
     }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
     say() {
          // super.say()  super 调用父类的方法
          return super.say() + '的儿子';
     }
}
var damao = new Son();
console.log(damao.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;

    }
    subtract() {
        console.log(this.x - this.y);
    }
}
var son = new Son(5, 3);
son.subtract();
son.sum();

3. 注意点:

  1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
  2. 类里面的共有属性和方法一定要加this使用.
  3. 类里面的this指向问题.
  4. constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
<body>
    <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                // constructor 里面的this 指向的是 创建的实例对象
                that = this;
                console.log(this);
                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            sing() {
                // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this);

                console.log(that.uname); // that里面存储的是constructor里面的this
            }
            dance() {
                // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
                _that = this;
                console.log(this);

            }
        }

        var ldh = new Star('刘德华');
        console.log(that === ldh);
        ldh.dance();
        console.log(_that === ldh);

        // 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

        // 2. 类里面的共有的属性和方法一定要加this使用.
    </script>
</body>

四、面向对象案例

1. 面向对象版 Tab栏切换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
index.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>

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;
}abscon {
    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.bind(this.add, this);
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i;
                this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this);
                this.remove[i].onclick = this.removeTab.bind(this.remove[i], this);
                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(that) {
            // 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) {
            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(that, 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');
凡小多
关注
专栏目录
ES6中定义类和对象的方法示例
12-09
本文实例讲述了ES6中定义类和对象的方法。分享给大家供大家参考，具体如下： 类的基本定义和生成实例： // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数
(JavaScript学习记录)：面向对象
baidu_41388533的博客
09-17 281
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4 目录 面向对象编程介绍 面向过程编程 POP(Process-oriented programming) 面向对象编程 OOP (Object Oriented Programming) 面向过程和面向对象的对比 ES6 中的类和对象 面向对象 对象 类 class 创建类 类 constructor 构造函数 .
【JavaScript 进阶教程】面向对象
weixin_52212950的博客
06-02 2407
ES6 是 JavaScript 语言的下一代标准，全称ECMAScript 6.0，ECMAScript 是JavaScript语言的国际标准，JavaScript是ECMAScript的实现，ES6 使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。......
ES6入门—ES6 对象与类的定义
weixin_44009656的博客
05-29 2010
本文介绍了 ES6 对象的属性简化写法、对象合并、字符串；ES6 类的定义及使用的 constructor() 方法、Class 表达式和 super 关键字。
ES6--对象
小鱼儿
01-14 4601
属性的简洁表示法ES6允许直接写入变量和函数，作为对象的属性和方法 function f( x, y ) { return { x, y }; } // 等同于 function f( x, y ) { return { x: x, y: y }; }var Person = { name: '张三', birth:'1990-01-01',
计算机后端-Java-PHP视频教程javascript02-demo.rar
05-23
首先，Java是一种面向对象的、多平台的编程语言，由Sun Microsystems（现已被Oracle收购）开发。它的设计目标是具有高可用性、安全性以及平台无关性，因此在企业级应用开发中广泛应用。Java后端开发通常涉及Servlets...
Javascript 面向对象的JavaScript进阶
08-13
### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前，我们首先需要了解面向对象编程（Object-Oriented Programming, OOP）的基本特性：封装性、抽象性、继承...
JavaScript进阶基础-3
最新发布
12-20
总结来说，JavaScript进阶基础涵盖了面向对象的原理和实践，如何通过Cookie处理HTTP的无状态请求，以及如何使用JSONP来突破同源策略的限制进行前后端数据交换。这些知识对于深入理解和开发JavaScript应用至关重要。
javascript-zhishizongjie.rar_javascript
09-24
理解构造函数、prototype、__proto__以及Object.create()对于深入理解JavaScript的面向对象编程至关重要。 4. **事件处理**：JavaScript与用户交互的关键在于事件处理，包括DOM事件、事件冒泡和事件捕获、事件对象...
angluo-javascript-266805.zip
12-07
对象可以互相引用，形成复杂的层次结构，这是JavaScript实现面向对象编程的基础。 5. **DOM操作**：JavaScript常用于操作HTML文档对象模型（DOM），通过DOM API可以增删改查页面元素，实现动态更新网页内容。 6. *...
ES6数组与对象的解构赋值详解
10-16
主要介绍了ES6数组与对象的解构赋值,结合实例形式详细分析了ES6中数组与对象的解构赋值原理、用法及相关操作注意事项,需要的朋友可以参考下
Es6 中的类和对象
chanyeloGril的博客
08-25 183
Es6 中的类和对象 1.对象 万物皆对象，对象是一个具体的事物。 对象由 属性 和 方法 组成： ​ 属性： 事物的特征，在对象中用属性来表示（常用名词） ​ 方法： 事物的行为，在对象中用方法来表示（常用动词） 2.类 在Es6中增加了类的概念，可以使用class关键字声明一个类，之后这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类(class),对象特指某一个，通过对象实例化一个具体的对象。 面向对象的思维特点： ​ （1）抽取（抽象）对象的公共的属性和行为组织（封装）成一个类（模板）。 ​
JS高级1（面向对象、类、继承）
m0_60830137的博客
11-07 255
模块化 <script> //1. var 声明变量 if (true) { var a = 10 //本意是在内部声明变量，不让外部访问，现在能访问，说明有bug } console.log(a); //10 for (var i = 0; i < 10; i++) { } console.log(i); //10 .
ES6中的类和对象
qq_55031668的博客
11-20 393
ES6中的类和对象 1.面向对象 面向对象更贴近我们实际生活，可以使用面向对象描述现实世界事物。但是事物分为具体的事物和抽象的事物。 面向对象的思维特点： 1、抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）。 2、对类进行实例化，获取类的对象。 面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。 2.1对象 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有
ES6 的类和对象的简单解析
luzhaopan的博客
08-09 827
{ // 一个类的基本定义和生成实例 // 定义一个Parent类 class Gfriend{ // 构造函数 constructor(name='甜甜圈'){ this.name=name; } } let lulu = new Gfriend('v'); console.log('构造函数和实例',lulu ); // v } ...
es6中的对象
m0_70273331的博客
05-03 374
在学习es6之前，我们去实现一个对象的过程是先创建一个构造函数，然会再使用new关键字去实例化一个对象。下面就是在es6之前实现的一个实例： ![](https://img-blog.csdnimg.cn/201908231 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 55107114.png) 在es6的语法中有一种新的写法来表示一个对象，其使用的就是class关键字加上对象的名称，此时需要注意的是在这里对象的名称需要去大写。虽
JavaScript进阶：面向对象与前端交互
"JavaScript进阶基础，涵盖了面向对象、前后端交互、cookie管理和jsonp解决跨域问题等内容。" 在JavaScript中，面向对象是一种重要的编程模式，它让我们能够通过模拟现实世界中的对象来组织代码，提高代码的可维护...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值