JavaScript-7

已于 2024-01-26 15:12:27 修改
阅读量899 收藏 21
点赞数 21
分类专栏： # JavaScript 文章标签： javascript
于 2024-01-24 11:59:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_stream/article/details/135818698
版权

创建对象

    <script>
        // 方法一：new Object()
        const obj1 = new Object()
        obj1.name = 'Jack'
        console.log(obj1);

        // 方法二：字面量
        const obj2 = { name: 'Jack' }
        console.log(obj2);

        // 方法三：利用构造函数创建对象
        function Pig(name, age) {
            this.name = name
            this.age = age
        }
        console.log(new Pig('佩奇', 6));
    </script>

实例与静态成员

实例成员：
	通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员
	实例成员包含：实例属性和实例方法

静态成员：
	构造函数的属性和方法被称为静态成员
	静态成员包含：静态属性和静态方法

说明：
	1.静态成员只能构造函数来访问
	2.静态方法中的this指向构造函数

    <script>
        // 构造函数
        function Person(name, age) {
            // 实例属性
            this.name = name
            this.age = age
            // 实例方法
            this.sayHi = function () {
                console.log('Hi');
            }
        }
        // 静态属性
        Person.eyes = 2
        Person.arms = 2
        // 静态方法
        Person.walk = function () {
            console.log('人都会走路');
            // 下面的 this 指向 Person
            console.log(this.eyes);
        }
    </script>

内置构造函数

Object

    <script>
        const obj1 = { name: 'Jack', age: 30 }

        // 获取所有的属性名
        console.log(Object.keys(obj1));     // 返回数组 ['name', 'age']

        // 获取所有的属性
        console.log(Object.assign(obj1));   // 返回数组 ['Jack', 30]

        // 追加对象属性
        const obj2 = {gender:'男'}
        Object.assign(obj2, obj1)   // 将obj1的属性追加到obj2
        console.log(obj2);
    </script>

Array

  • reduce() 方法
    <script>
        // arr.reduce(function (上一次值, 当前值){...}, 初始值)

        arr = [1, 5, 8]

        // 1.没有初始值
        const total_1 = arr.reduce(function (prev, current) {
            return prev + current
        })      // 执行过程：1 + 5 => 6 + 8

        // 2.有初始值
        const total_2 = arr.reduce(function (prev, current) {
            return prev + current
        }, 10)  // 执行过程：10 + 1 => 11 + 5 => 16 + 8 => 24

        // 3.箭头函数的形式
        const total_3 = arr.reduce((prev, current) => prev + current, 10)
        console.log(total_3);   // 24
    </script>

String

  • split() 方法
    <script>
    	// split 把字符串转换为数组，刚好与join()相反
        const str = 'green|red'
        const arr = str.split('|')
        console.log(arr);   // ['green', 'red']
    </script>
  • substring() 方法
    <script>
        // 字符串的截取
        const str = '我一直都热爱这份事业'
        console.log(str.substring(1, 3));   // 输出结果： 一直
    </script>
  • startsWith() 方法
    <script>
    	// 判断字符串是否以xxx开头
        str = 'Hello World'
        alert(str.startsWith('He'))     // true
    </script>

Number

  • toFixed() 设置保留小数位的长度
    <script>
        // 数值类型
        const price = 12.345
        // 保留两位小数 四舍五入
        console.log(price.toFixed(2));  // 12.35
    </script>

原型

原型对象（prototype）

基本概念

  • 构造函数通过原型分配的函数是所有对象所共享的
  • JavaScript规定，每一个构造函数都有一个 prototype 属性
  • 这个属性，指向另一个对象，所以我们也称之为原型对象
  • 这个对象可以挂载函数，对象实例化不会多次创建在原型对象上
  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法
  • 构造函数和原型对象中的 this 都指向实例化的对象

具体内容

    <script>
        // 公共的属性写到构造函数里面（每个对象自己都有一份，浪费内存）
        function People(name, age) {
            this.name = name
            this.age = age
            // this.sing = function() {
            //     console.log('唱歌');
            // }
        }

        // 公共的方法写到"原型对象"身上（所有对象共享，节约内存）
        People.prototype.sing = function () {
            console.log('唱歌');
        }

        // 实例化对象
        const obj1 = new People('Jack', 30)
        const obj2 = new People('Peter', 25)

        // 调用方法
        obj1.sing()
        obj2.sing()

        console.log(obj1.sing === obj2.sing);   // true
    </script>

案例演示

  • 给数组自定义的扩展一个"求和"的方法
    <script>
        // 数组
        const arr = [1, 2, 3]
        // 自定义方法
        Array.prototype.sum = function () {
            return this.reduce((prev, current) => prev + current, 0)
        }
        // 调用该方法
        console.log(arr.sum());
    </script>
  • 给数组自定义的扩展一个"最大值"的方法
    <script>
        // 数组
        const arr = [1, 2, 3]
        // 自定义方法
        Array.prototype.max = function () {
            return Math.max(...this)
        }
        // 调用该方法
        console.log(arr.max());
    </script>
  • 给数组自定义的扩展一个"最小值"的方法
    <script>
        // 数组
        const arr = [1, 2, 3]
        // 自定义方法
        Array.prototype.min = function () {
            return Math.min(...this)
        }
        // 调用该方法
        console.log(arr.min());
    </script>

constructor 属性

基本概念

  • 每个"原型对象"里面都有一个 constructor 属性（constructor 构造函数）
  • 作用：这个属性指向"该原型对象的构造函数"
    <script>
        function People() {
            // ...
        }
        console.log(People.prototype.constructor === People);   // true
    </script>

具体演示

当我们给"原型对象"一个一个的去添加"功能函数"时，会不会觉得非常的麻烦？下面的方法，能够快速的解决这个问题。

    <script>
        // 构造函数
        function People() {
            // ...
        }

        // People.prototype.sing = function () {
        //     console.log('唱歌');
        // }
        // People.prototype.dance = function () {
        //     console.log('跳舞');
        // }
        
        // 输出
        console.log(People.prototype)
        // 输出内容：
        // constructor: ƒ People()
        
        // 在修改原型对象的时候，除了添加你需要的函数功能
        // 请记得！还要添加"constructor:构造函数"
        // 以此实现"让它指回原来的构造函数"的目的
        People.prototype = {
            constructor: People,
            sing: function () { console.log('唱歌'); },
            dance: function () { console.log('跳舞'); }
        }
        
        // 输出
        console.log(People.prototype)
        // 输出内容：
     	// constructor: ƒ People()
		// dance: ƒ ()
		// sing: ƒ ()
    </script>

对象原型（__proto__）

思考引入

问题：

  • “构造函数"可以创建"实例对象”，“构造函数"还有一个"原型对象”
  • 一些公共的属性或者方法，可以放到"原型对象"上
  • 但是为什么"实例对象"可以访问"原型对象"里面的属性和方法呢？

答案：

  • "实例对象"都会有一个__proto__属性
  • 这个属性，指向构造函数的"原型对象"
  • __proto__属性，我们称之为"对象原型"

注意事项

  • __proto__是 JS 非标准属性，用来表明"当前实例对象"指向哪个"原型对象"
  • [[prototype]]和__proto__意义相同
  • __proto__里面也有一个constructor属性，指向创建该实例对象的"构造函数"
    <script>
        // 构造函数
        function People() { }
        // 实例对象
        const obj = new People()
        // 校验
        console.log(obj.__proto__.constructor === People);  // true
    </script>

原型继承

<script>
        // 构造函数（人）
        function People() {
            this.eyes = 2
            this.head = 1
        }

        // 构造函数（Woman）
        function Woman() {
            // ...
        }

        // Woman 通过原型对象prototype来继承Person
        Woman.prototype = new People()

        // 因为使用对象的赋值操作，所以prototype原来的constructor没了，我们需要手动添加回去
        Woman.prototype.constructor = Woman

        // 女人独有的能力
        Woman.prototype.beauty = function () {
            console.log('美丽动人')
        }

        // 构造函数（Man）
        function Man() {
            // ...
        }

        // 同上
        Man.prototype = new People()
        Man.prototype.constructor = Man

        // 男人独有的能力
        Man.prototype.handsome = function () {
            console.log('英俊潇洒')
        }

        // 创建对象
        const obj1 = new Woman()
        const obj2 = new Man()

        // 输出
        console.log(obj1.beauty())
        console.log(obj2.handsome())

        console.log(Woman.prototype)
        console.log(Man.prototype)
    </script>

原型链

基本认识

  • 基于原型对象的继承，使得不同构造函数的原型对象关联在一起
  • 并且这种关联的关系是一种链状的结构
  • 我们将这种原型对象的链状结构关系称为原型链

在这里插入图片描述

查找规则

  • 当访问一个对象的属性或方法时
  • 首先查找这个对象"自身"有没有该属性
  • 如果没有，就查找它的原型（也就是__proto__指向的prototype原型对象）
  • 如果还没有，就继续向上查找
  • 依此类推，直到找到 Object 为止
  • __proto__对象原型的意义就在于，为对象成员查找机制提供一个方向，或者说一条路线
  • 可以使用 instanceof 运算符，去检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
    <script>
        function Person() { }
        const obj = new Person()
        
        console.log(obj instanceof Person)  // true
        console.log(obj instanceof Object)  // true
        console.log(obj instanceof Array)   // false
    </script>

面向对象编程案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            text-align: center;
        }

        .modal {
            margin: 200px auto;
            padding: 10px;
            width: 400px;
            height: 150px;
            box-shadow: 5px 2px 10px 2px rgba(0, 0, 0, 0.5);
            border-radius: 10px
        }

        .modal .header i {
            margin-left: 300px;
        }

        .modal .body {
            margin: 50px 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="btn">
        <button id="delete">注册</button>
        <button id="login">登录</button>
    </div>

    <script>
        // 1. 完成Modal构造函数的封装
        function Modal(title = '', message = '') {
            // 创建modalm=模态框盒子
            // 1.1 创建div标签
            this.modalBox = document.createElement('div')
            // 1.2 给div标签添加类名为modal
            this.modalBox.className = 'modal'
            // 1.3 modal盒子内部填充2个div标签，并且修改文字内容
            this.modalBox.innerHTML = `
            <div class="header">${title}<i>x</i></div>
            <div class="body">${message}</div>
            `
        }

        // 2. 给构造函数的原型对象挂载open方法
        Modal.prototype.open = function () {
            // 先来判断页面中是否有modal盒子，如果有先删除，没有就添加
            const box = document.querySelector('.modal')
            box && box.remove()
            document.body.append(this.modalBox)
            this.modalBox.querySelector('i').addEventListener('click', () => {
                this.close()    // 这个this指向实例对象
            })
        }

        // 3. 给构造函数的原型对象挂载close方法
        Modal.prototype.close = function () {
            this.modalBox.remove()
        }

        // 点击注册按钮
        document.querySelector('#delete').addEventListener('click', () => {
            const obj = new Modal('温馨提示', '您还没有登录呢')
            obj.open()
        })

        // 点击登录按钮
        document.querySelector('#login').addEventListener('click', () => {
            const obj = new Modal('友情提示', '您还没有注册呢')
            obj.open()
        })
    </script>
</body>

</html>
code_stream
关注
  • 21
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 基础构造函数
qiaokelibangwo的博客
06-10 367
构造函数是专门用于创建对象的函数，如果一个函数使用 关键字调用，那么这个函数就是构造函数。 总结：使用 关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略 构造函数的返回值即为新创建的对象构造函数内部的 返回的值无效！注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。1. 实例成员通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。 总结：构造函数内部 实际上就是实例对象，为其动态添加的属性和方法即为实例成员为构造函数传入参数，动
JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
sinat_19755843的专栏
04-10 317
在我们使用“对象名.属性名”访问一个属性时，会先访问成员属性，如果成员属性中找不到，JS会沿着对象的原型链，继续通过__proto__向上查找，也就找到了原型属性。(对象的原型)：对象才有__proto__，而且所有对象必有__proto__属性（这里的对象除了我们理解的狭义对象，也包括了函数、数组等对象）。那么问题来了……
JavaScript面向对象、ES6类的语法、静态成员与实例成员
m0_56649557的博客
06-19 656
面向对象 面向对象的主要思想就是把需要解决的问题分解成一个个对象，建立对象不是为了实现一个步骤，而是为了描述每个对象在解决问题中的行为，面向对象的核心是对象。 面向对象的优势： 模块化更深，封装性强 更容易实现复杂的业务逻辑 更易维护、易复用、易扩展 面向对象的特征： 封装性: 对象是属性和行为的结合体 多态性: 同一消息被不同的对象接收后 会产生不同的效果 继承性: 子类可以继承父类的信息 ES6面向对象语法 ES6：ES是ECMAScript的简写，它是JavaScript的语法规范。ES6是在
JS高级之静态成员和实例成员
李建雨的博客
12-12 1059
成员 就是指属性、方法的统称 静态成员是指 由构造函数直接调用的属性、方法叫静态成员 实例成员是指 由构造函数创建出来对象才能调用的属性和方法就叫实例成员 实例化： 创建一个对象，也可以叫实例化一个对象 静态成员优势 调用方法 实例成员优势 操作不同数据 成员：就是指属性、方法的统称 静态...
JS中的实例成员和静态成员
feng_cy的博客
09-15 1282
1.实例成员就是构造函数内部通过this添加的成员 实例成员只能通过实例化的对象进行访问 2.静态成员是在 构造函数本身上添加的成员 静态成员只能通过构造函数访问 不能通过对象访问 <script> function Star(uname, sex) { this.uname = uname; this.sex = sex; this.sing = function() {
building-javascript-7-games
05-04
构建JavaScript-Awesome-7-Games :Japanese_symbol_for_beginner: 实时预览项目： 记忆游戏- Whack A Mole- 连接四- 诺基亚Snake游戏- 太空侵略者- Fogger游戏- 俄罗斯方块游戏- </> HAPPY Coding :...
ans-javascript-sdk:Analysys JavaScript SDK
05-07
npm install ans-javascript-sdk --save JavaScript 基础说明： JS SDK 用于由 HTML 、 Css 及 Javascript 制作成的网站，集成前请先安装SDK 快速集成 如果您是第一次使用易观方舟产品，可以通过阅读本文快速了解此...
photoshop-cc-javascript-ref-2019.pdf
06-06
photoshop-cc-javascript-ref-2019学习教程
photoshop-javascript-ref-2020.pdf
03-11
PHOTOSHOP javascript脚本开发的官方帮助文档，英文的。有需要的朋友可以下来看看，也可以当工具字典用。
photoshop-cc-javascript-ref-2015.pdf
06-06
photoshop-cc-javascript-ref-2015学习教程
JAVASCRIPT(7)
m0_65474726的博客
09-26 298
大
JS高级七
weixin_52482833的博客
03-23 757
JS计时事件 在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。 两个关键方法是： setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。 function---指定运行代码 milliseconds---毫秒数 clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码 setInterval()的返回值。 <!DOCTYPE ...
JavaScript面向对象学习构造函数、静态成员和实例成员（二）
总结前端开发中遇到的问题，分享前端知识
08-07 234
静态成员 在构造函数本身上添加的成员 就是静态成员；静态成员只能通过构造函数来访问；不能通过对象来访问
js高级——静态成员和实例成员
UNDEFINED_AUBE的博客
12-27 1181
1.静态成员：构造函数的属性、方法 2.实例成员：实例的睡醒、方法 （1）例如：$("#id").css()             这里的css()就是一个实例成员。因为$("#id")是一个jquery对象，而对象是一个实例 （2）$.trim()                这里的trim()就是一个静态成员。因为$是一个函数，通过函数去访问成员 3.一般来说会把工具方法作为静
JavaScript零基础入门 7：JavaScript基础函数
学Java，找哪吒
12-19 9242
一、日期 1、Date JavaScript中用Date()函数获取时间。 var date = new Date(); 2、创建一个指定的时间对象 需要在构造函数中传递一个表示时间的字符串作为参数，日期的格式月份/日/年时:分:秒 var date2 = new Date("11/2/2021 18:15:00"); 3、getDate() 获取当前日期对象是几日。 4、getDay() 获取当前日期对象时周几，会返回一个0-6的值，0表示周日，1 表示周一。。。 5、g...
JavaScript-----静态成员在ES5和ES6中的实现
m0_58646138的博客
06-25 545
JavaScript-----静态成员在ES5和ES6中的实现 static
js高级-静态成员和实例成员
qiaoyangla的博客
02-27 420
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(...
javascript中的静态成员
猿来儒此
11-20 1840
我的Blog原文： 点击打开链接 静态成员是在类的层次上操作，而不是在实例的层次上操作。静态属性和方法也就是那些从一个实例到另一个实例都不会发生改变的属性和方法。 在javascript中并没有特殊的语法来表示静态成员。但是可以通过使用构造函数并且向其添加属性这种方式，从而获得与“类式”语言相通的语法。 在基于类的语言中，静态成员是通过特殊的语法创建的，并且在使用过程中如同类本身的成员一样。
javascript-3.1.1
最新发布
11-14
JavaScript-3.1.1是一种用于网页开发的脚本语言版本。JavaScript是一种动态、强类型的脚本语言，广泛应用于客户端的网页开发中。 JavaScript-3.1.1版本在之前的版本上进行了一些改进和优化。这个版本引入了一些新的特性和功能，提供了更好的开发体验和更高的效率。 在JavaScript-3.1.1中，开发者可以使用新的语法和关键字来编写更简洁和高效的代码。对于之前的一些语法和方法，也进行了一些调整和改进，使得开发者可以更方便地使用和理解。 除了语法的改进，JavaScript-3.1.1还提供了一些新的内置函数和对象，使得开发者可以更方便地处理和操作数据。同时，这个版本还加强了对浏览器兼容性和性能优化的支持，使得开发者可以在不同的浏览器和平台上更稳定地运行代码。 JavaScript-3.1.1还提供了更丰富的开发工具和框架，帮助开发者更轻松地构建复杂的应用程序。这些工具和框架提供了一些通用的功能和组件，可以大大减少开发的时间和工作量。 总之，JavaScript-3.1.1是一种更强大、更稳定的脚本语言版本，提供了更多的功能和特性，帮助开发者更简单、高效地开发网页应用程序。开发者使用这个版本可以更轻松地构建交互性强、用户体验好的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值