黑马JavaScript笔记（四）高级篇

最新推荐文章于 2024-03-27 23:09:56 发布

VIP文章 jiujiujm

最新推荐文章于 2024-03-27 23:09:56 发布

阅读量1.3k

点赞数 4

分类专栏：黑马JavaScript笔记文章标签： js

本文链接：https://blog.csdn.net/jiujiujm/article/details/117153559

版权

JavaScript面向对象编程

01 面向对象编程介绍

1.1 两大编程思想

面向过程
面向对象

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

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。
在这里插入图片描述

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

面向对象是以对象功能来划分问题，而不是步骤。
在这里插入图片描述

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

在这里插入图片描述

02 ES6中的类和对象

2.1 对象

在这里插入图片描述

2.2 类class

在这里插入图片描述

2.3 创建类

在这里插入图片描述

2.4 类constructor构造函数

在这里插入图片描述

<body>
    <script>
        // 1. 创建类 class  创建一个 明星类
        class Star {
   
            constructor(uname, age) {
   
                this.uname = uname;
                this.age = age;
            }
        }

        // 2. 利用类创建对象 new
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);
        //(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
        //(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
        //(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
        //(4) 生成实例 new 不能省略
        //(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
    </script>
</body>

2.5 类添加方法

在这里插入图片描述

<body>
    <script>
        // 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('李香兰');
    </script>
</body>

03 类的继承

3.1 继承

在这里插入图片描述

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

在这里插入图片描述
继承中的属性或者方法查找原则: 就近原则
1 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

    <script>
        // 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. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
    </script>

super 必须在子类this之前调用

    <script>
        // 父类有加法方法
        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();
    </script>

在这里插入图片描述

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

04 面向对象案例

(D:\前端学习\黑马JavaScript\ja-vaScript进阶面向对象ES6资料\JavaScript高级\JavaScript 高级第一天\code\07-面向对象案例)

构造函数和原型

01 构造函数和原型

1.1 概述

在这里插入图片描述

<body>
    <script>
        // 1. 利用 new Object() 创建对象

        var obj1 = new Object();

        // 2. 利用 对象字面量创建对象

        var obj2 = {
   };

        // 3. 利用构造函数创建对象
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
            this.sing = function() {
   
                console.log('我会唱歌');

            }
        }

        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(ldh);
        ldh.sing();
        zxy.sing();
    </script>
</body>

1.2 构造函数

在这里插入图片描述

<body>
    <script>
        // 构造函数中的属性和方法我们称为成员, 成员可以添加
        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); // 不能通过对象来访问
    </script>
</body>

1.3 构造函数的问题

在这里插入图片描述

1.4 构造函数原型prototype

在这里插入图片描述
一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上

<body>
    <script>
        // 1. 构造函数的问题. 
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
            // this.sing = function() {
   
            //     console.log('我会唱歌');

            // }
        }
        Star.prototype.sing = function() {
   
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(ldh.sing === zxy.sing);
        // console.dir(Star);
        ldh.sing();
        zxy.sing();
        // 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
    </script>
</body>

1.5 对象原型proto

在这里插入图片描述

<body>
    <script>
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
   
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        ldh.sing();
        console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
        console.log(ldh.__proto__ === Star.prototype);
        // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
        // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
    </script>
</body>

1.6 constructor构造函数

在这里插入图片描述
Star.prototype = {
constructor: Star,
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

    <script>
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
        // Star.prototype.sing = function() {
   
        //     console.log('我会唱歌');
        // };
        // Star.prototype.movie = function() {
   
        //     console.log('我会演电影');
        // }
        Star.prototype = {
   
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
   
                console.log('我会唱歌');
            },
            movie: function() {
   
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);
    </script>

1.7 构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

1.8 原型链

在这里插入图片描述

<body>
    <script>
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
   
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        // 1. 只要是对象就有__proto__ 原型, 指向原型对象
        console.log(Star.prototype);
        console.log(Star.prototype.__proto__ === Object.prototype);
        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Object.prototype.__proto__);
        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
    </script>
</body>

1.9 JavaScript 的成员查找机制(规则)

在这里插入图片描述

<body>
    <script>
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
   
            console.log('我会唱歌');

        }
        Star.prototype.sex = '女';
        // Object.prototype.sex = '男';
        var ldh = new Star('刘德华', 18);
        ldh.sex = '男';
        console.log(ldh.sex);
        console.log(Object.prototype);
        console.log(ldh);
        console.log(Star.prototype);
        console.log(ldh.toString());
    </script>
</body>

1.10 原型对象this指向

在这里插入图片描述

<body>
    <script>
        function Star(uname, age) {
   
            this.uname = uname;
            this.age = age;
        }
        var that;
        Star.prototype.sing = function() {
   
            console.log('我会唱歌');
            that = this;
        }
        var ldh = new Star('刘德华', 18);
        // 1. 在构造函数中,里面this指向的是对象实例 ldh
        ldh.sing();
        console.log(that === ldh);

        // 2.原型对象函数里面的this 指向的是 实例对象 ldh
    </script>
</body>

1.11 扩展内置对象

在这里插入图片描述

<body>
    <script>
        // 原型对象的应用 扩展内置对象方法

        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;
        //     }

最低0.47元/天解锁文章

jiujiujm

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
黑马JavaScript笔记（四）高级篇

JavaScript面向对象编程01 面向对象编程介绍1.1 两大编程思想面向过程面向对象1.2 面向过程编程 POP(Process-oriented programming)面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。1.3 面向对象编程 OOP (Object Oriented Programming)面向对象是以对象功能来划分问题，而不是步骤。1.4 面向过程和面向对象的对比02 ES6中的类和对象2.1 对象2.2 类class2.3 创建类
复制链接

扫一扫