js高级

最新推荐文章于 2023-12-14 09:53:32 发布

置顶初级前端工程师小膏

最新推荐文章于 2023-12-14 09:53:32 发布

阅读量1k

点赞数 4

分类专栏： JavaScript高级文章标签： JavaScript高级

本文链接：https://blog.csdn.net/weixin_45582072/article/details/100182876

版权

JavaScript高级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js高级，就是JavaScript的Es6的高级语法。首先我们提到两大编程思想：

1.面向过程编程和面向对象编程

面向过程编程就是分析问题解决需要的步骤，然后一步步实现的去实现，使用的时候一次次调用。

面向对象编程；就是先分析问题所需要的功能，把事物才分成一个个对象，然后对象之间分工合作。

面向过程编程和面向对象编程的有缺点

1.面向过程编程：代码执行效率高，但不容易维护和复用。

2.面向对象编程：代码模块化，主要中心放在功能的分化，容易维护，可复用。

面向对象三大特性

封装性
继承性
多态性（抽象性）

来讲什么什么对象，什么是类;对象是指某个具体的事物，类是泛指某一大类，比如明星，演员等。

ES6中使用对象

class num{
    constructor(){}
    
}

在ES6中给我们提供了 class这个关键字，只要是跟在class后面，就是一个类（代表是泛指）

2，构成函数 construction也可以称为构造器，class的默认函数，当new一个对象的时候自动调用或者创建 construction、

class Person{
      constructor(uName,age){
          this.uName = uName,
          this.age = age
      }
      play(){

     }
}
var ltz = new Person('ltz', 18)
ltz.uName;
ltz.play()

ES6中的继承

ES6为我们提供继承 extends

继承：我们可以把公共的属性和方法都写在父类中，那么我在创建子类的时候就不需要写这个属性跟方法了，只需要去写子类特有的属性跟方法就行了。

class Child extends  Father{
       constructor(){
            // 代表是调用父类的构造
            super()
       }
}

其中里面 super方法是调用父亲的属性和方法。习惯只要继承了某一类 constructor 里面立马跟上super方法。

ES6中的this

我们常常会被class里面的this绕晕，class里面的this万能不变的特性是谁调用他他就指向谁。

我们在类中，去使用属性或者是调用方法千万不要忘记了用 this，需要去关注的就是this的指向问题：默认情况下，类中的this都指向的是当前实例化的对象，除非事件、定时器，或者是手动改变了this的指向。

<!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>Document</title>
</head>

<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>

</html>

禁止文字被选中

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()；

还有一点 Es6里面取消变量提升，所有创建类的时候我们一般写在前面。

初级前端工程师小膏

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js高级

js高级，就是JavaScript的Es6的高级语法。首先我们提到两大编程思想：1.面向过程编程和面向对象编程面向过程编程就是分析问题解决需要的步骤，然后一步步实现的去实现，使用的时候一次次调用。面向对象编程；就是先分析问题所需要的功能，把事物才分成一个个对象，然后对象之间分工合作。面向过程编程和面向对象编程的有缺点1.面向过程编程：代码执行效率高，但不容...
复制链接

扫一扫