ES6中的类和对象

àì夳堔傛蜴生んèń 2023-07-08 09:06 1阅读 0赞

### ES6中的类和对象 ###

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

对象：特指某一个，通过实例化一个具体得对象

面向对象的思维特点：

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

#### 创建类 ####

//1. 创建类 class 创建一个 明星类
    var that;
    class Star{ 
        //类的共有属性放到 constructor 里面
        constructor(uname){ 
            //constructor 里面this 指向的是 ldh
            that = this;
            this.uname = uname;
            this.btn = document.querySelector('button');
            this.btn.onclick = this.sing;
        }
        //类里面所有函数不需要写function
        //多个函数方法之间不需要添加逗号分隔
        sing(){ 
            //sing 里面的this 指向的是 btn
            console.log(this.uname); //undefined
            console.log(that.uname); //刘德华
        }
    }
    //2. 利用类创建对象 new
    var ldh = new Star('刘德华');

#### 类constructor构造函数 ####

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

#### 注意 ####

1.  在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2.  类里面的共有属性和方法一定要加this使用
3.  类里面this 的指向问题
4.  constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者
5.  方法之间不能加逗号分隔，同时方法不需要添加function关键字

### 类的继承 ###

继承 extends

**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){ 
            //利用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.sum();
    son.subtract();

继承中的属性或方法查找原则：就近原则

### 面向对象的案例 ###

功能需求:

1.  点击 tab栏,可以切换效果
2.  点击 + 号, 可以添加 tab 项和内容项
3.  点击 x 号, 可以删除当前的tab项和内容项
4.  双击tab项文字或者内容项文字,可以修改里面的文字内容

#### 面向对象版 **tab** 栏切换 添加功能 ####

1.  点击 + 可以实现添加新的选项卡和内容
2.  第一步: 创建新的选项卡li 和 新的 内容 section
3.  第二步: 把创建的两个元素追加到对应的父元素中.
4.  以前的做法: 动态创建元素 `createElement`, 但是元素里面内容较多, 需要 `innerHTML` 赋值,在 `appendChild` 追加到父元素里面.
5.  现在高级做法: 利用 `insertAdjacentHTML()` 可以直接把字符串格式元素添加到父元素中
6.  `appendChild` 不支持追加字符串的子元素, `insertAdjacentHTML` 支持追加字符串的元素
7.  `insertAjacentHTML(追加的位置，'要追加的字符串元素')`
8.  追加的位置有：`beforeend` 插入元素内部的最后一个子节点之后
9.  [该方法地址][Link 1]

#### 面向对象版 **tab** 栏切换 删除功能 ####

1.  点击 × 可以删除当前的li选项卡和当前的section
2.  X是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号
3.  所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section
4.  但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素. 需要调用init 方法

点击 x 号 会产生冒泡

JavaScript事件取消和阻止冒泡

1.  取消默认操作
    
    W3C的方法是`e.preventDefault()` ，IE则是使用`e.returnValue = false`
    
        function cancelHandler(event){ 
            var event = event || window.event;
            if(event.preventDefault) event.preventDefault(); //标准技术
            if(event.returnValue) event.returnValue = false; //IE
        	return false; //用于处理使用对象属性注册的处理程序
        }
2.  return false
    
    JavaScript的return false 只会阻止默认操作，相当于使用 `event.preventDefault`
    
    jQuery既阻止默认操作又防止对象冒泡，相当于同时使用`event.preventDefault` 和 `event.stopPropagation`
    
        <div id='div'  onclick='alert("div");'>
        	<ul  onclick='alert("ul");'>
        		<li id='ul-a' onclick='alert("li");'><a href="#"id="testA">嵌套</a></li>
        	</ul>
        </div>
        var a = document.getElementById("testA");
        //只会阻止默认行为，不会停止冒泡
        a.onclick = function(){ 
        	return false;
        };
3.  阻止冒泡
    
    W3C的方法是 `e.stopPropagation()`，IE则是用`e.cancelBubble = true`
    
        function bubbles(event){ 
        	var event = event || window.event;
            if(event.stopPropagation){ 
                event.stopPropagation();
            }else{ 
                event.cancelBubble = true;
            }
        }

#### 面向对象版 **tab** 栏切换 编辑功能 ####

1.  双击选项卡li或者 section里面的文字,可以实现修改功能
2.  双击事件是: ondblclick
3.  如果双击文字,会默认选定文字,此时需要双击禁止选中文字
4.  `window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();` [Selection 属性和方法][Selection]
5.  核心思路: 双击文字的时候, 在 里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可

var that;
    class Tab{ 
        constructor(id){ 
            that = this;
            this.main = document.querySelector(id);
            this.lis = this.main.querySelectorAll('li');
            this.sections = this.main.querySelectorAll('section');
            this.add = this.main.querySelector('.tabadd');
            this.ul = this.main.querySelector('.firstnav ul:first-child');
            this.fsection = this.main.querySelector('.tabscon');
            this.remove = this.main.querySelectorAll('.icon-guanbi');
            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('.firstnav li span:first-child');
        }
        toggleTab(){ 
            that.clearClass();
            this.className = 'liactive';
            that.sections[this.index].className = 'conactive';
        }
        clearClass(){ 
            for(var i = 0; i < this.lis.length; i++){ 
                this.lis[i].className ='';
                this.sections[i].className = '';
            }
        }
        addTab(){ 
            that.clearClass();
            var li = '<li class="liactive"><span>Tab</span><span class="iconfont icon-guanbi"></span></li>';
            var section = '<section class="conactive">Content</section>'
            that.ul.insertAdjacentHTML('beforeend', li);
            that.fsection.insertAdjacentHTML('beforeend',section);
            that.init();
        }
        removeTab(e){ 
            e.stopPropagation(); //阻止冒泡，防止触发li 的切换点击事件
            var index = this.parentNode.index;
            that.lis[index].remove();
            that.init();
            //当我们删除不是选中状态的li 的时候，原来的选中状态li 保持不变
            if(document.querySelector('liactive')) return
            //当我们删除了选中状态的这个li 的时候，让它前一个li 处于选定状态
            index--;
            //手动调用我们的点击事件
            that.lis[index] && that.lis[index].click();
        }
        editTab(){ 
            var str = this.innerHTML;
            //双击禁止选定文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty;
            this.innerHTML = '<input type="text">';
            //可以使用ES6 模板字符串
            //this.innerHTML = `<input type="text" value=${str} >`
            var input = this.children[0];
            input.value = str;
            //文本框里面的文字处于选定状态，当我们离开文本框就把文本框里面的值给span
            input.select(); 
            input.onblur = function(){ 
                this.parentNode.innerHTML = this.value;
            }
            //按下回车也可以把文本框里面的值给span
            input.onkeyup = function(e){ 
                if(e.keyCode === 13){ 
                    //手动调用表单失去焦点事件
                    this.blur();
                }
            }
        }
    }
    
    new Tab('#tab');

<!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">
                
                <nav class="firstnav">
                    <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>
    
                
                <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>

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

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

### 构造函数和原型 ###

#### 构造函数和原型 ####

ES6， 全称 ECMAScript 6.0 ，2015.06 发版。在ES6之前，JS中并没有引入类的概念

在ES6之前，对象不是基于类创建的，而是用构造函数来定义对象和它们的特征

创建对象可以通过以下三种方式：

1.  对象字面量
2.  new Object()
3.  自定义构造函数

new在执行时会做四件事情：

1.  在内存中创建一个空对象
2.  让this指向这个新对象
3.  执行构造函数里面的代码，给这个新对象添加属性和方法
4.  返回这个新对象（所以构造函数里面不需要return）

*  静态成员：在构造函数本上添加的成员，只能由构造函数本身来访问
 *  实例成员：在构造函数内部创建的对象成员，只能由实例化对象来访问

function Star(uname, age) { 
        this.uname = uname;
        this.age = age;
        this.sing = function() { 
            console.log('我会唱歌');
    
        }
    }
    var ldh = new Star('刘德华', 18);
    // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh.uname);
    ldh.sing();
    // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
    // 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员
    Star.sex = '男';
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    console.log(ldh.sex); // 不能通过对象来访问实例化成员就是构造函数内部通过this添加的成员

每一个构造函数都有一个prototype属性，指向另一个对象，注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例可以共享这些方法

对象都会有一个属性`__proto__` 指向构造函数的prototype原型对象，`__proto__` 对象原型和原型对象prototype是等价的

对象原型（`__proto__` ）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor我们成为构造函数，因为它指回构造函数本身

原型对象里面放的是方法，这个方法里面this指向的是 这个方法的调用者，也就是这个实例对象

// 原型对象的应用 扩展内置对象方法
    
    Array.prototype.sum = function() { 
        var sum = 0;
        for (var i = 0; i < this.length; i++) { 
            sum += this[i];
        }
        return sum;
    };
    // Array.prototype = { 
    // sum: function() { 
    // var sum = 0;
    // for (var i = 0; i < this.length; i++) { 
    // sum += this[i];
    // }
    // return sum;
    // }
    
    // }
    var arr = [1, 2, 3];
    console.log(arr.sum());
    console.log(Array.prototype);
    var arr1 = new Array(11, 22, 33);
    console.log(arr1.sum());

#### 继承 ####

ES6之前并没有给我们提供 extends 继承。我们可以通过 构造函数+原型对象 模拟实现继承，被称为组合继承。

`fun.call(thisArg, arg1, arg2, ...)`

*  thisArg ：当前调用函数 this 的指向对象
 *  arg1，arg2：传递的其他参数

// 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) { 
        // this 指向父构造函数的对象实例
        this.uname = uname;
        this.age = age;
    }
    // 2 .子构造函数 
    function Son(uname, age, score) { 
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age);
        this.score = score;
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
[Selection]: https://blog.csdn.net/weixin_42420703/article/details/84892528