JS高级进阶（类和对象）

最新推荐文章于 2024-04-03 00:50:20 发布
最新推荐文章于 2024-04-03 00:50:20 发布
阅读量134 收藏
点赞数 1
分类专栏： JS高级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CrtLife/article/details/115539161
版权

一、ES6中类和对象

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

1. 类中添加方法

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

2. 类的继承

2.1 继承

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);

       }
}
class Son extends Father{  // 这样子类就继承了父类的属性和方法

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

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

2.2 Super关键字

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

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

2.3 注意事项

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

二、ES5中对象的创建

1. 构造函数和原型

1.1 概述

在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。
ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

1.2 构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

       // 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();

注意

  1. 构造函数用于创建某一类对象，其首字母要大写
  2. 构造函数要和 new 一起使用才有意义

2. 静态成员和实例成员

// 构造函数中的属性和方法我们称为成员, 成员可以添加
        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); // 不能通过对象来访问
区别
静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问
实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

3. 原型

3.1 构造函数原型prototype

  • 构造函数通过原型分配的函数是所有对象所共享的。
  • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会 被构造函数所拥有。
  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

prototype原型：一个对象，我们也称为 prototype 为原型对象。
作用： 实现共享方法。

3.2 对象原型 proto

  • 对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。
  • __proto__对象原型和原型对象 prototype 是等价的
  • __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype
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这个方法

3.3 constructor 构造函数

  • 对象原型（ proto）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。
  • constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
  • 一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
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);
构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

原型链

在这里插入图片描述

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

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

  1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
  2. 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
  3. 如果还没有就查找原型对象的原型（Object的原型对象）。
    依此类推一直找到 Object 为止（null）。
  4. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

3.4 原型对象this指向

  • 构造函数中的this 指向我们实例对象.
    原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.

3.5 利用prototype扩展内置对象方法

  • 可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。
// 原型对象的应用 扩展内置对象方法

        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());

4. 继承

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

4.1 call()

  • 调用这个函数, 并且修改函数运行时的 this 指向
  • 核心原理： 通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。
4.1.1 借用父构造函数继承属性
 // 借用父构造函数继承属性
        // 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);
4.1.2 借用原型对象继承父类型方法
  • 一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。
  • 核心原理：
    – 将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
    – 本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
    将子类的 constructor 从新指向子类的构造函数
// 借用父构造函数继承属性
        // 1. 父构造函数
        function Father(uname, age) {
            // this 指向父构造函数的对象实例
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.money = function() {
            console.log(100000);

        };
        // 2 .子构造函数 
        function Son(uname, age, score) {
            // this 指向子构造函数的对象实例
            Father.call(this, uname, age);
            this.score = score;
        }
        // Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
        Son.prototype = new Father();
        // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
        Son.prototype.constructor = Son;
        // 这个是子构造函数专门的方法
        Son.prototype.exam = function() {
            console.log('孩子要考试');

        }
        var son = new Son('刘德华', 18, 100);
        console.log(son);
        console.log(Father.prototype);
        console.log(Son.prototype.constructor);

总结

  • 类的本质
  1. class本质还是function.
  2. 类的所有方法都定义在类的prototype属性上
  3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象
  4. 所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
  5. 所以ES6的类其实就是语法糖.
  6. 语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖
// ES6 之前通过 构造函数+ 原型实现面向对象 编程
        // (1) 构造函数有原型对象prototype 
        // (2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身
        // (3) 构造函数可以通过原型对象添加方法
        // (4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象
        // ES6 通过 类 实现面向对象编程 
        class Star {

        }
        console.log(typeof Star);
        // 1. 类的本质其实还是一个函数 我们也可以简单的认为 类就是 构造函数的另外一种写法
        // (1) 类有原型对象prototype 
        console.log(Star.prototype);
        // (2) 类原型对象prototype 里面有constructor 指向类本身
        console.log(Star.prototype.constructor);
        // (3)类可以通过原型对象添加方法
        Star.prototype.sing = function() {
            console.log('冰雨');

        }
        var ldh = new Star();
        console.dir(ldh);
        // (4) 类创建的实例对象有__proto__ 原型指向 类的原型对象
        console.log(ldh.__proto__ === Star.prototype);
        i = i + 1;
        i++
沉碎.
关注
专栏目录
JS高级语法（知识点汇总一）
carolynkim的博客
07-31 282
JS高级语法 一、面向对象编程 什么是面向对象编程？ 从宏观出发，以对象为基础业务进行分析 1 当前业务总体分为几个对象？ 2 针对于对象考虑，根据其属性以及方法，能满足对应需求 二、JS中创建对象（四种） 1、简单创建 优点：简单 缺点：创建过程太麻烦，尤其是创建对象 2、工厂模式 优...
《前端》JavaScript知识（黑马）（高级一）
BelleDiao的博客
04-26 328
1、实例对象和构造函数之间的关系： 实例对象是通过构造函数来创建的---创建的过程叫实例化 如何判断对象是不是这个数据类型? 1)通过构造器的方式实例对象.构造器==构造函数名字 2)对象instanceof构造函数名字 尽可能的使用第二种方式来识别,为什么?原型讲完再说。 2、构造函数创建对象引发的问题 <script> functio...
js高级
qq_43808599的博客
11-15 313
JavaScript 是什么 解析执行：轻量级解释型的，或是 JIT 编译型的程序设计语言 语言特点：动态，头等函数 (First-class Function) 又称函数是 JavaScript 中的一等公民 执行环境：在宿主环境（host environment）下运行，浏览器是最常见的 JavaScript 宿主环境 但是在很多非浏览器环境中也使用 JavaScript ，例如 n...
JS高级语法————黑马课程
m0_70021890的博客
10-02 630
js高级
【前端学习之路】 JavaScript高级部分02 （黑马课程笔记）
a123456_9的博客
07-17 314
正则表达式（RegularExpression）是用于匹配字符串中字符组合的模式，在JS中，正则表达式是对象。正则表达式通常被用来检索、替换、获取某些符合某个模式（规则）的文本。预定义类指的是某些常见模式的简写方式。...
JavaScript 高级（进阶）
m0_73198722的博客
10-29 824
JS高级
javascript-pro:javascript高级进阶文档
06-15
"javascript-pro:javascript高级进阶文档"这个资源显然旨在帮助开发者深入理解并掌握JavaScript的高级概念和技巧，以提升他们的编程能力。这里我们将探讨JavaScript的高级主题，包括但不限于原型链、闭包、异步编程...
JAVASCRIPT高级进阶1[借鉴].pdf
10-11
《JAVASCRIPT高级进阶1[借鉴].pdf》这份资料旨在帮助开发者进一步提升JavaScript技能，讲解了函数、面向对象、特殊对象、继承等关键概念。 首先，函数是JavaScript的核心组成部分，它允许我们将代码组织成可重复...
PHP高级进阶资料文档.rar
12-05
《PHP高级进阶指南》是一份综合性的学习资源，涵盖了PHP编程语言的深入理解和实践技巧。这份文档旨在帮助已经掌握了PHP基础的开发者进一步提升技能，探索PHP的高级特性和最佳实践，以达到更高层次的开发水平。 在...
JS高级进阶（二）
weixin_67398884的博客
04-14 360
构造函数与原型
js高级语法
04-27 419
/**引用概念**/function cite(){  //多个变量可以引用同一个对象  var obj   =new Object();  var newObj=obj;      //obj.oneproperty="true";      newObj.oneproperty="true";      alert("多个变量可以引用同一个对象:"+(newObj.oneproperty ==...
JS高级语法
weixin_47412580的博客
06-25 339
JS高级语法的使用
Js高级语法
Gao_xu_sheng的博客
01-17 1165
比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。它类似于数组，但是成员的值都是唯一的，没有重复的值。使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
【JavaScript】JS高级语法
最新发布
m0_64538862的博客
04-03 1784
变量与函数，作用域，定义变量，作用域链，闭包，预解析，let提升，函数参数，箭头函数，解构赋值，数组解构，对象解构，对象，字面量创建对象，构造函数，自定义构造函数，静态成员和实例成员，数据类型，引用类型，Object，Array，RegExp，包装类型，String，Number，Boolean，原型对象，原型链，this指向，普通函数，严格模式，箭头函数，改变函数的this指向，call，apply，bind，class关键字（类），封装，继承，浅拷贝，深拷贝
JavaScript高级语法
code_J的博客
10-25 843
目录 一、Exception 1.异常概述 2.异常捕捉 3.异常抛出 二、JSON 1.JSON概述 2.JSON数据类型 (1)、JSON字符串 (2)、JSON数字 (3)、JSON对象 (4)、JSON数组 (5)、JSON布尔 (6)、JSONnull (7)、JSON字符串转JS对象 (8)、JS对象转JSON字符串 (8)、JSON PHP 三、AJAX 1.AJAX概述 2.XMLHttpRequest对象 3.get和post请求 四、Coo.
JavaScript高级教程：从基础到进阶实战
"这是一份全面深入的JavaScript高级教程，旨在帮助学习者掌握JavaScript的核心概念和高级特性。教程分为多个章节，详尽地介绍了JavaScript的基础知识、与HTML的交互、基本语法、DOM对象、事件处理、网络操作以及各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值