JavaScript入门6

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量825 收藏 16
点赞数 22
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79742908/article/details/136191559
版权

构造函数

在 JavaScript 中，构造函数是一种特殊的函数，用于创建和初始化一个新的对象。在 JavaScript 中，我们使用构造函数来定义对象类型，并创建基于该对象类型的新实例。

使用构造函数的场景：

  1. 创建多个具有相同属性和方法的对象
  2. 对象需要使用动态生成的数据进行初始化，比如从数据库中读取数据
  3. 对象需要进行一些预处理或者初始化操作

使用构造函数的步骤如下：

  1. 定义一个构造函数，并在构造函数内部使用 this 关键字来引用新创建的对象，并为该对象添加属性和方法
  2. 通过 new 关键字来创建对象的实例，可以传递参数给构造函数，以便根据不同的参数执行不同的初始化操作
  3. 使用实例对象的属性和方法
// 定义一个构造函数 
function Person(name, age) { 
    this.name = name; 
    this.age = age; 

// 在构造函数内部定义一个方法 
this.sayHello = function() { 
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years                     old.'); 
    }; 
} // 创建一个 Person 对象的实例 
var person1 = new Person('Alice', 30); 
var person2 = new Person('Bob', 25); // 使用实例对象的属性和方法 console.log(person1.name); // 输出：Alice person2.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.

new的实例化过程

在 JavaScript 中，使用 new 关键字来创建对象的实例时，会执行以下步骤：

  1. 创建一个新的空对象
  2. 将该空对象的原型链接到构造函数的 prototype 属性上
  3. 执行构造函数，并将 this 关键字绑定到新创建的空对象上
  4. 如果构造函数有返回值，并且返回值是一个对象，则将该对象作为 new 表达式的返回值；否则返回新创建的空对象

简单说来，当我们使用 new 关键字来创建对象的实例时，实际上就是通过构造函数来初始化一个新的对象。在初始化过程中，系统会自动执行一系列步骤，包括创建一个新的空对象并将其绑定到构造函数上，执行构造函数并初始化对象的属性和方法等。

// 定义一个构造函数 
function Person(name, age) { 
    this.name = name; 
    this.age = age; 

// 在构造函数内部定义一个方法 
this.sayHello = function() { 
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.'); 
    }; 
} // 使用 new 关键字创建对象实例 

var person = new Person('Alice', 30); // 调用对象的方法 
person.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old.

实例成员

实例对象（Instance Objects）是通过构造函数创建的对象，而实例成员（Instance Members）是指属于实例对象的属性和方法。

实例对象是根据构造函数创建的具体对象，每个实例对象都有自己独立的属性值，并且可以调用属于它们的方法。这些属性和方法被称为实例成员，因为它们属于实例对象的特定实例。

function Person(name, age) {
  // 实例属性
  this.name = name;
  this.age = age;
}

// 实例方法
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 创建两个实例对象
var person1 = new Person('Alice', 30);
var person2 = new Person('Bob', 25);

person1.greet(); // 调用实例方法
person2.greet();

console.log(person1.name); // 访问实例属性
console.log(person2.age);

静态成员

静态成员（Static Members）通常是通过在构造函数本身上定义属性和方法，而不是在其原型上定义。这样定义的成员不会被每个对象实例复制，而是共享给所有对象实例。静态成员可以通过构造函数本身来访问和调用，而不是通过对象实例。

function MathUtility() {}

// 静态属性
MathUtility.PI = 3.14159;

// 静态方法
MathUtility.calculateCircleArea = function(radius) {
  return Math.PI * radius * radius;
};

console.log(MathUtility.PI); // 访问静态属性
var area = MathUtility.calculateCircleArea(5); // 调用静态方法
console.log(area);

包装对象

包装对象（Wrapper Objects）是指基本数据类型（如字符串、数字、布尔值）对应的对象形式。当我们尝试在基本数据类型上调用对象方法时，JavaScript会临时将基本数据类型转换为对应的包装对象，以便调用该方法，然后再将其转换回基本数据类型。

Object

Object.keys()、Object.values() ：分别用于获取对象的键、值。

const obj = { a: 1, b: 2, c: 3 }; 
console.log(Object.keys(obj)); // ['a', 'b', 'c'] 
console.log(Object.values(obj)); // [1, 2, 3] 
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，并返回目标对象。这个方法可以用来实现对象的浅拷贝。

// 创建目标对象
let target = { };

// 创建源对象
let source1 = { b: 3, c: 4 };

// 将源对象的属性复制到目标对象
Object.assign(target, source1);

// 输出目标对象
console.log(target);

Array

reduce()用于对数组中的每个元素执行指定的回调函数，并从左到右累积计算结果。

const numbers = [1, 2, 3, 4, 5];

// 计算数组中所有元素的和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 输出 15，即 1 + 2 + 3 + 4 + 5 的和

join(separator) 方法用于将数组中的所有元素转换为字符串，并使用指定的分隔符来连接这些字符串。它接收一个参数 separator，表示要用作分隔符的字符串，默认为逗号。调用 join() 方法会返回一个由数组元素组成的字符串，元素之间用指定的分隔符分隔。

const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join(', ');

console.log(result); // 输出 "apple, banana, orange"

every(callbackFn) 方法用于判断数组中的每个元素是否都通过了指定函数的测试。它接收一个参数 callbackFn，表示要对每个数组元素执行的测试函数，这个函数返回 true 或 false。every() 方法会遍历数组的每个元素，直到有一个元素未通过测试，则返回 false；如果所有元素都通过了测试，则返回 true。

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // 输出 true，因为数组中所有元素都是偶数

find() 方法用于查找数组中满足提供的测试函数的第一个元素。它接收一个参数 callbackFn，表示要对每个数组元素执行的测试函数，这个函数返回 true 或 false。find() 方法会遍历数组的每个元素，直到找到第一个满足条件的元素，然后返回该元素；如果没有找到满足条件的元素，则返回 undefined。

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(element => element > 10);

console.log(found); // 输出 12，因为它是数组中第一个大于 10 的元素

构造函数实现封装及问题

构造函数可以通过闭包的特性来实现封装，将一些属性和方法私有化，只暴露必要的接口给外部。

function Person(name, age) {
  var _name = name; // 私有属性
  var _age = age; // 私有属性

  // 公有方法
  this.getName = function() {
    return _name;
  };

  this.getAge = function() {
    return _age;
  };
}

var person1 = new Person("Alice", 30);
console.log(person1.getName()); // "Alice"
console.log(person1._name); // undefined，私有属性无法直接访问

使用构造函数实现封装可能会存在浪费内存的问题。

在 JavaScript 中，每个通过构造函数创建的对象都会有一组独立的属性和方法，这些属性和方法都是在对象实例化时在内存中被分配的。如果我们需要创建大量的对象，就需要分配大量的内存空间来存储这些属性和方法，这将会对性能产生影响，尤其是在低端设备上或者移动端。

此外，由于每个对象都有自己独立的属性和方法，这些属性和方法都需要在内存中占用存储空间，因此会导致内存的浪费。

为了避免浪费内存，可以考虑使用原型链来共享对象的属性和方法。通过把对象的属性和方法定义在原型对象上，所有的对象实例都可以共享这些属性和方法，从而减少内存的使用。这种方式被称为原型继承，它可以避免对象实例化时重复定义属性和方法，达到节省内存的目的。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.getName = function() {
  return this.name;
};

Person.prototype.getAge = function() {
  return this.age;
};

var person1 = new Person("Alice", 30);
console.log(person1.getName()); // "Alice"
console.log(person1.age); // 30，可以直接访问公有属性

原型

在 JavaScript 中，每个对象都有一个原型（prototype），它是一个指向另一个对象的引用。原型对象包含了一些共享的属性和方法，可以被它的所有实例对象所共享。

当我们创建一个新对象时，它会自动继承其构造函数的 prototype 属性。通过这种方式，我们可以将方法和属性添加到一个构造函数的 prototype 中，从而使得这个构造函数创建的所有实例对象都能够共享这些方法和属性。

constrctor属性

在 JavaScript 中，每个对象都有一个特殊的内置属性 constructor，它引用创建对象的构造函数。这个属性指向用于创建对象的构造函数本身。

当我们使用构造函数创建一个对象时，该对象会自动获得一个名为 constructor 的属性，指向用于创建它的构造函数。这样我们就可以通过对象的 constructor 属性来获取创建该对象的构造函数，并且可以使用这个属性来检查对象的类型。

对象原型__proto__

__proto__ 是 JavaScript 中对象的一个内置属性，它是一个指向该对象的原型（prototype）的引用。这个属性允许我们直接访问和操作对象的原型。

const animal = {
  type: 'Animal',
  sound: function() {
    console.log('Some sound');
  }
};

const cat = {
  name: 'Fluffy',
  __proto__: animal // 设置 cat 对象的原型为 animal
};

console.log(cat.name); // 输出 "Fluffy"
cat.sound(); // 输出 "Some sound"
console.log(cat.__proto__); // 输出 { type: 'Animal', sound: [Function: sound] }

原型继承

在 JavaScript 中，原型继承是一种实现对象之间继承关系的方式。每个对象都有一个原型对象，可以通过原型链来实现属性和方法的继承。

在原型继承中，一个对象可以通过指定另一个对象作为其原型，从而继承该原型对象的属性和方法。这样，子对象就可以共享父对象的属性和方法，实现了代码的重用和组织。

// 定义一个动物对象作为原型
const animal = {
  type: 'Animal',
  sound: function() {
    console.log('Some sound');
  }
};

// 创建一个猫对象，并将动物对象设置为其原型
const cat = Object.create(animal);
cat.name = 'Fluffy';

// 调用猫对象的方法
console.log(cat.name); // 输出 "Fluffy"
cat.sound(); // 输出 "Some sound"

原型链

原型链（Prototype Chain）是 JavaScript 中实现对象继承的一种机制。每个对象都有一个原型对象，而原型对象也可以有自己的原型对象，这样就形成了一个链式结构，被称为原型链。

当我们通过对象访问一个属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到为止。这个过程会一直持续到达原型链的顶端，即 Object.prototype，如果在整个原型链中都没有找到对应的属性或方法，那么返回 undefined。

// 定义一个原型对象
const animal = {
  type: 'Animal',
  sound: function() {
    console.log('Some sound');
  }
};

// 创建一个新对象，并将原型设置为 animal
const cat = Object.create(animal);
cat.name = 'Fluffy';

// 访问 cat 对象的属性和方法
console.log(cat.name); // 输出 "Fluffy"
cat.sound(); // 输出 "Some sound"

// 继续向上查找
console.log(cat.toString()); // 输出 "[object Object]"

沼泽里的森林
关注
  • 22
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript入门
04-28
javascript 入门教程，第五版入门经典
Javascript 入门基础学习
10-29
习.net已经近2年了，最近学习Ajax时发现自己的很多技术功底很是欠缺，比如JavaScript。今后我会将我正在学习的也写成笔记，有时间的话将以前的东西整理整理也传上来。
JavaScript 快速入门教程
qq_53569667的博客
12-31 758
在学习 JavaScript 的过程中，根据狂神Java和菜鸟教程的学习内容整理出来的一些笔记
javascript 阮一峰入门教程
running_131的博客
07-13 3442
Javascript [阮一峰大神](https://wangdoc.com/javascript/index.html)，深入浅出 文章来源 https://wangdoc.com/javascript/index.html 博客图片显示方法 https://crazyang.blog.csdn.net/article/details/87917772?
前端之JavaScript入门篇
Queen_is_king的博客
07-26 2403
JavaScript是一门解释型语言，也是动态语言。所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。而所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术提示。.
arcgis for JavaScript入门篇
qq_69444691的博客
07-10 2155
ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。
JavaScript入门基础
『愚』的博客
11-06 3836
JavaScript入门基础概述变量的声明变量的作用域基本数据类型Number类型String类型Boolean类型Undefined类型Null类型三大引用类型Object类型Array类型Function类型typeof 操作符js编写的位置js的三种输出方式 概述 JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，Jav
JavaScript基础入门
dangfulin的博客
08-21 5375
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
JavaScript 入门
Robin Smith
03-05 784
学习目标： 提示： 督促自己学习JavaScript，自律会自由 学习的课程来自优达学城JavaScript入门 JavaScript入门学习目标：一、什么是JavaScript？二、数据类型和变量三、条件语句四、循环五、函数六、数组七、对象 一、什么是JavaScript？ 二、数据类型和变量 三、条件语句 四、循环 五、函数 六、数组 七、对象 ...
JavaScript入门教程
qq_69401634的博客
08-07 485
本文为JavaScript入门教程第一部分，包括JavaScript概述、JavaScript引用方法、JavaScript的数据类型和运算符、JavaScript的严格检查模式、函数、var，let，constructor、方法、内部对象、面向对象、操作BOM对象、操作DOM对象、jQuery基本语法等等......
最通俗易懂的JavaScript入门教程
热门推荐
轻松玩编程
05-08 7万+
前言：“成功没有捷径，脚踏实地一步一个脚印，该来的总会来，不好高骛远，不急功近利，付出总会有回报，不管处于哪个阶段，都要一步一个脚印，踏实的走好每一步！” 你好，我是梦阳辰！快和我一起走进JavaScript的世界吧。 01.JavaScript概述 1.什么是JavaScript? JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是王景公司（NetScape)...
JavaScript入门教程 Cookies
10-30
使用 Cookies　我们已经知道，在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么？
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 364
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 445
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Vue CLI 4与项目构建实战指南
06-09 941
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值