JavaScript高级知识-ES5~6

已于 2022-11-11 10:19:35 修改
阅读量518 收藏 1
点赞数
分类专栏： javascript基础知识 文章标签： javascript 原型模式 前端
于 2022-11-10 15:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484007/article/details/127770145
版权

ES5

原型

获取对象的原型：

        const obj = {
            name: '张三',
            age: 18
        }
        // 浏览提共的获取对象原型的方法
        console.log(obj.__proto__);
        // 官方提供的获取对象原型的方法
        console.log(Object.getPrototypeOf(obj));

在这里插入图片描述

作用

获取某个对象的属性的查找方式如下：

  1. 优先从当前对象查找，找到即返回，否则执行步骤2
  2. 沿着原型链查找，找到即返回，直到返回null

示例：我们在Object原型上设置了sex属性，对于一个新创建的对象obj上是没有这个sex属性的，但是当我们查找obj.sex的时候却返回了value“男”，这就是原型的作用之一。

        Object.prototype.sex = '男'
        const obj = {
            name: '张三',
            age: 18
        }
        // 浏览提共的获取对象原型的方法
        console.log(obj.__proto__);
        // 官方提供的获取对象原型的方法
        console.log(Object.getPrototypeOf(obj));
        console.log(obj.sex)
        console.log(obj.id)

在这里插入图片描述

函数的原型prototype

        var obj = {};
        function test() {}
        // 1.将函数看成一个普通的对象时，它是具有__proto__(隐式原型)
        console.log('obj.__proto__:', obj.__proto__)
        console.log('test.__proto__:',test.__proto__)
        
        // 2.将函数看成一个函数时，它是具备prototype
        // 作用：用来构建对象时，给对象设置隐式原型的
        console.log('test.prototype:', test.prototype)
        // 对象是没有prototype的
        // console.log('obj.prototype:', obj.prototype)

在这里插入图片描述

作用

       function Student (name, age) {
         this.name = name;
         this.age = age;
         this.running = function(){
            console.log(`${this.name}在跑步`)
         }
       }
       Student.prototype.singing = function() {
       		console.log(`${this.name}在唱歌`);
       }
       var s1 = new Student('张三', 18);
       var s2 = new Student('李四', 18);

       console.log('他们的running是不是同一个？', s1.running === s2.running);
       console.log('他们的singing是不是同一个？', s1.singing === s2.singing);

在这里插入图片描述
问题：我们可以从上得出，创建多个student对象就会创建多个running()，但很明显，running()是可以共用的。
解决办法：通过显示原型prototype进行设置，不管创建多少个student对象，他们的singing()都指向同一个，这就是prototype的作用之一。
函数的
函数的prototype是一个对象。

constructor

constructor是原型对象上的属性，指向当前的函数对象。
举例：
对于下面的Student函数。
Student的原型：Student.prototype
constructor: Student.prototype.contructor
关系：Student.prototype.contructor 指向Student

       function Student (name, age) {
         this.name = name;
         this.age = age;
       }
       var studentPrototype = Student.prototype;
       console.log('studentPrototype:', studentPrototype)
       console.log('studentPrototype.constructor:', studentPrototype.constructor);
       console.log(studentPrototype.constructor === Student)

在这里插入图片描述

面向对象的特性

面向对象有三大特性：封装、继承、多态。

  • 封装：将属性和方法封装到一个类中，称之为封装；
  • 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
  • 多态：不同的对象在执行时表现出不同的姿态。

原型链继承

目前student的原型是p对象，而p对象的原型是Person默认的原型。
注意：步骤4和5是不可以调整顺序的，否则会有问题。（在下面的示例中，会报错studying is not a function）

       // 1.定义父类构造函数 
       function Person (name) {
            this.name = name;
       }
       // 2.父类原型上添加内容
       Person.prototype.running = function () {
        console.log(`${this.name} is running`);
       }
       // 3.定义子类构造函数
       function Student (age) {
            this.age = age;
       }
       // 4.创建一个父类的实例对象（new Person()），用这个实例对象作为子类的原型对象
       var p = new Person('张三');
       Student.prototype = p;
       // 5.在子类原型上添加内容
       Student.prototype.studying = function() {
        console.log(`${this.name} is studying`)
       }
       var s = new Student(18);
       console.log(s.name);
       console.log(s.running());
       console.log(s.studying());

在这里插入图片描述
在这里插入图片描述

原型链继承的弊端

某些属性其实是保存在p对象上的

  • 第一，我们通过打印对象是看不到这个属性的；
  • 第二，这个属性会被多个对象共享。如果这个对象是一个引用类型，那么就会造成问题；
  • 第三，不能给Person传递参数（让每个stu有自己的属性）。因为这个对象是一次性创建的（没办法定制化）。

组合继承

组合继承是借用构造函数来实现继承的目的。
Person.call(this, name)这里调用Person()构造函数，此时函数里面的this指向的是Student的示例对象。
在这里插入图片描述
在这里插入图片描述

       // 1.定义父类构造函数 
       function Person (name) {
            this.name = name;
       }
       // 2.父类原型上添加内容
       Person.prototype.running = function () {
        console.log(`${this.name} is running`);
       }
       // 3.定义子类构造函数
       function Student (name, age) {
            // 借用构造函数继承
            Person.call(this, name)
            this.age = age;
       }
       var p = new Person('李四', 12);
       Student.prototype = p;
       // 4.在子类原型上添加内容
       Student.prototype.studying = function() {
        console.log(`${this.name} is studying`)
       }
       var s = new Student('张三',18);
       console.log(s.name);
       console.log(s.running()); 
       console.log(s.studying());

在这里插入图片描述

存在的问题

组合继承最大的问题是无论在什么情况下，都会调用两次父类构造函数。

  • 一次在创建子类原型的时候；
  • 另一次在子类构造函数内部（每次创建子类实例的时候）

所有子类实例事实上会拥有两份父类的属性：

  • 一份在当前的实例里面（person本身），另一份在子类对应的原型对象中（person.__proto__里面）；但是不会出现问题，默认一定是访问实例本身这部分。

寄生组合继承

// 创建对象的过程
function createObject (obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}

// 将SubType和SuperType联系在一起
// 寄生式函数
function inherit (SubType, SuperType) {
    SubType.prototype = createObject(SuperType);
    Object.defineProperty(SubType.prototype, 'constructor', {
        enumerable: false,
        configurable: true,
        writable: true,
        value: SubType
    })
}

ES6

原型继承关系

在这里插入图片描述

class类的定义

定义方法：类声明式和类表达式

// 第一种
class XXX {

}
// 第二种
var yyy = class XXX {

}

示例：

 // ES5类的声明
    function Student (name, age) {
        this.name = name;
        this.age = age;
    }
    Student.prototype.running = function () {
        console.log(`${this.name} is running`);
    }
    // ES6类的声明
    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        running() {
            console.log(`${this.name} is running`);
        }
    }
    var p = new Person('张三', 18);
    var p1 = new Person('张三ds', 18);
    console.log(p.name)
    p.running();
    console.log(p.__proto__ === Person.prototype) // true
    console.log(p.running == p1.running) // true

类的访问器编写方式：

    class Person {
        constructor(name, age) {
            this._name = name;
            this._age = age;
        }
        set name(value) {
            console.log('设置新的name')
            this._name = value;
        }
        get name() {
            console.log('返回name')
            return this._name;
        }
        running() {
            console.log(`${this._name} is running`);
        }
    }
    var p = new Person('张三', 18);
    // console.log(p.age) undefined
    // console.log(p._age) 18 不建议
    console.log(p.name) 
    p.name = '李四';

在这里插入图片描述

new一个对象时发生的事情

  1. 在内存中创建一个新的对象（空对象）；
  2. 这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性；
  3. 构造函数内部的this，会指向创建出来的新对象；
  4. 执行构造函数的内部代码（函数体代码）；
  5. 如果构造函数没有返回非空对象，则返回创建出来的新对象。

类的静态方法

静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用static关键字来定义：

class Person {
        constructor(name, age) {
            this._name = name;
            this._age = age;
        }
        static sayHello() {
            console.log('这是静态方法');
        }
        static sVal = '静态属性';
    }
    console.log(Person.sayHello());
    console.log(Person.sVal);

extends继承

super关键字

  • 执行super.methodName(…)来调用父类方法
  • 执行super(…)来调用父类constructor(只能在子类的constructor中使用)
    class Person {
        constructor(name) {
            this.name = name;         
        }
        running () {
            console.log(`${this.name} is running`);
        }
    }
    class Student extends Person{
        constructor(name, age) {
            super(name);
            this.age = age;
        }
    }
    const stu = new Student('张三', 18);
    console.log(stu.name); // 张三
    stu.running(); // 张三 is running

Proxy

我们先看一下Object.defineProperty如何监听对象的属性：

var obj = {
    name: '中',
    age: 1
}
// 监听所有的属性：遍历所有的属性，对每一个属性使用defineProperty
const keys = Object.keys(obj);
for (const key of keys) {
    let val = obj[key];
    Object.defineProperty(obj, key, {
        set: function(newVal) {
            console.log(`${key}设置了新的值${newVal}`);
            value = newVal;
        },
        get: function () {
            console.log(`返回${key}的值${value}`);
            return value;
        },
    })
}

obj.name = '李四';
console.log(obj.name);

在这里插入图片描述

问题：

Object.defineProperty对于新增属性、删除属性等操作是无能为力的。

解决方法：

如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象(proxy)；之后对该对象的所有操作，都可以通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作。
MDN文档

const p = new Proxy(target, handler)

参数

  • target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  • handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
var obj = {
    name: '中',
    age: 1
}

const p = new Proxy(obj, {
    get: function (target, property, receiver) {
        // target:目标对象
        // property: 被获取的属性名
        // receiver: Proxy 或者继承 Proxy 的对象
        console.log(`监听${target}对象的${property}`)
        return target[property];
    },
    set: function (target, property, value, receiver) {
        // value: 新属性值
        console.log(`监听${target}对象设置的${property}属性的值${value}`)
        target[property] = value;
    }
})

p.name;
p.name = '张三'

在这里插入图片描述

Reflect

Reflect文档

作用：

主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法；比如：Reflect.getPrototypeOf(target)类似于Object.getPrototypeOf();、Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty()。

为什么需要reflect?

早期的ECMA规范中没有考虑到这种对对象本身的操作如何设计会更加规范，所以将这些API放到了Object上面。但是Object作为一个构造函数，这些操作实际上放到它身上并不合适。因此，ES6新增了Reflect，就把这些操作集中到了Reflect对象上了。最后，在使用Proxy时，可以做到不操作原对象。
Reflect和Object的比较

var obj = {
    name: '中',
    age: 1
}

const p = new Proxy(obj, {
    get: function (target, property, receiver) {
        // target:目标对象
        // property: 被获取的属性名
        // receiver: Proxy 或者继承 Proxy 的对象
        console.log(`监听${target}对象的${property}`)
        return target[property];
    },
    set: function (target, property, value, receiver) {
        // target[property] = value;
        // 1.代理对象的目的：不再直接操作原对象
        // 2.Reflect.set方法有返回Boolean值，可以判断set是否成功
        // 3.receiver就是外层的Proxy对象
        // 4.Reflect.set/get最后一个参数，可以决定对象访问器setter/getter的this指向
        const isSuc = Reflect.set(target, property, value);
        if (!isSuc) {
            console.log('赋值失败')
        }
    }
})

p.name;
p.name = '张三'
不点外卖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级-ES6
weixin_43342445的博客
12-15 127
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
JavaScript高级+ES6
m0_52412929的博客
11-08 567
一、面向过程和面向对象 面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 概括：面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 概括：面向对象是以对象功能来划分问题，而不是步骤。 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对
Proxy和Reflect
duansamve的博客
09-15 343
Reflect：反射 作用一： Reflect.apply(调用的函数，this指向，参数数组)，类似fn.call()、fn.apply() ； function show(...args){ console.log(this); console.log(args); } Reflect.apply(show, 'aaa', [1, 2, 3, 4, 5]); 作用二...
JS高级 Proxy-Reflect介绍
顾久``的博客
12-06 638
在ES6中新增了一个Proxy类，是用于帮助我们创建一个代理的。即，如果希望监听一个对象的相关属性，那么可以先创建一个代理对象（Proxy对象），之后对该对象的所有操作，都通过代理对象来完成。 Reflect主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法。
ES6和ES5语法区别（Reflect对象和Object对象 ）
vue
03-14 598
一、概述 1、Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。 现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。 //ES5写法 try{ Object.defineProperty(target,property,attributes)...
JS中数组与对象的解构
MixedSignals的博客
04-12 817
数组的解构语法就是数组的另一种使用调用方法，可以不通过[]语法或者不通过索引下标来调用使用数组中的数据。用于将数组中的数据一一对应的赋值给变量 const arr = ['北京','上海','广州','重庆','天津']; // 之前使用数组的数据，必须要通过[]语法和索引下标 // let str1 = arr[0]; // let...
javascript-fundamentals-2015:JavaScript 基础课程知识库
05-31
JavaScript是Web开发中不可或缺的一部分，尤其在...理解并掌握它们，对于后续学习更高级的JavaScript特性和框架至关重要。尽管2015年的JavaScript已有更新，但这些基础始终不变，对于初学者来说，仍然是良好的起点。
javascript-fundamentals:这是参考依据
04-17
"javascript-fundamentals"着重于介绍JavaScript的基础知识，让我们深入探讨这些概念。 1. **变量（Variables）** - 在JavaScript中，我们可以使用`let`、`const`和`var`关键字声明变量。`let`是ES6引入的新特性，...
javascript-ESC1-1
02-20
在这个名为"javascript-ESC1-1"的学习资料中，我们可以深入探讨JavaScript的基础知识和实际应用。 首先，JavaScript的变量是存储数据的容器，可以通过var、let或const关键字进行声明。var是ES5中的变量声明方式，而...
JavaScript高级第03天笔记1
08-04
JavaScript 高级笔记 - 函数的定义和调用、this 指向和改变、严格模式 JavaScript 中的函数定义和调用是编程语言的基础。函数可以定义多种方式，包括函数声明、函数表达式和 new Function()。函数的调用方式也多种...
[ES6] 解构赋值
qq_14993591的博客
09-14 94
数组的解构赋值 const arr = ['北京','上海','广州','重庆','天津',[100,200,300,400]]; // JavaScript自动将 arr数组中的数据 // 解构之后 一一对应的赋值给变量储存 let [a,b,c,d,e,[f,g,h,i]] = arr; console.log(a,b,c,d,e,f,g,h,i); 北京 上海 广州 重庆 天津 100 200 300 400 对象的解构赋值 const obj = {name:'张三',age:18,sex:'男
ES3、ES5、ES6对象代理的写法差异
http://xueshuai.top
09-18 472
ES3的写法： console.log('定义私有变量ES3写法：') // ES3 var Person = function (){ var data = { name:'ES3', age:14, sex:'nv' } // 读API this.get = function(key){ ret...
ES6黑科技实践--proxy,reflect
热门推荐
程鹏飞的博客
12-19 1万+
最近逛GitHub看到大神sindresorhus 新出的on-change对象数组监听库。看了下代码，基于proxy实现。于是顺便研究一下es6中的proxy和reflect。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 415
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 847
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1003
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 906
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
JavaScript ES5 & ES6：基本语法与数据类型解析
"JavaScript语言基础概览，包括...这些基础知识构成了JavaScript编程的基础，理解和掌握它们对于编写有效的JavaScript代码至关重要。随着对语言的深入学习，还将接触到作用域、闭包、原型链、异步编程等更高级的概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值