JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)

一.forEach遍历数组

forEach()方法用于调用数组的每个元素,并将元素传递给回调函数

用于遍历数组的每个元素

语法:

javascript 复制代码
被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
    //函数体
})

只遍历不返回数组

参数当前数组元素是必须要写的,索引号可选

javascript 复制代码
const arr = ['张三','李四','王五']
arr.forEach(function(item,index){
    console.log(item,index);
})

二.创建对象的三种方式

1.利用对象字面量创建对象

javascript 复制代码
<body>
  <script>
    const obj = {
      name:'张三',
      age:18,
      sex:'男'
    }
  </script>
</body>

2.利用new Object创建对象

javascript 复制代码
<body>
  <script>
    const obj = new Object()
    console.log(obj);
    obj.name = '张三'
    console.log(obj);
  </script>
</body>

3.利用构造函数创建对象

三.构造函数

一种特殊的函数,主要用来初始化对象。可以通过构造函数来快速创建多个类似的对象

构造函数在技术上是常规函数。

不过有两个约定:

1.它们的命名以大写字母开头

2.它们只能由"new"操作符来执行

创建构造函数:

javascript 复制代码
<body>
  <script>
    function Pig(name,age){
      this.name = name
      this.age = age
    }
    const pig1 = new Pig('佩奇',1)
    const pig2 = new Pig('乔治',2)
    console.log(pig1);
    console.log(pig2);
  </script>
</body>

1.使用new关键字调用函数的行为被称为实例化

2.实例化构造函数时没有参数时可以省略()

3.构造函数内部无需写return,返回值即为新创建的对象

4.构造函数内部的return返回的值无效,所以不要写return

  1. new Object() ,new Date()也是实例化构造函数

四.new实例化执行过程

1.创建新对象

2.构造函数this指向新对象

3.执行构造函数代码,修改this,添加新的属性

4.返回新对象

五.实例成员和静态成员

1.实例成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例

方法)

1.为构造函数传入参数,创建结构相同但值不同的对象

2.构造函数创建的实例对象彼此独立互不影响

javascript 复制代码
<body>
  <script>
    function Pig(name){
      this.name = name
    }
    const pig1 = new Pig('佩奇')
    const pig2 = new Pig('乔治')
    console.log(pig1 === pig2)
  </script>
</body>
javascript 复制代码
<body>
  <script>
    function Pig(name){
      this.name = name
    }
    const pig1 = new Pig('佩奇')
    pig1.name = '小猪佩奇'
    pig1.say = function(){
      console.log('我是' + this.name)
    }
    const pig2 = new Pig('乔治')
    console.log(pig1);
    console.log(pig2);
  </script>
</body>

2.静态成员

构造函数的属性和方法被称为静态成员(静态属性和静态方法)

1.静态成员只能构造函数来访问

2.静态方法中的this指向构造函数

比如:Date.now(),Math.PI,Math.random()

javascript 复制代码
<body>
  <script>
    function Pig(name){
      this.name = name
    }
    Pig.eyes = 2 // 静态属性
    console.log(Pig.eyes);
    Pig.say = function(){ // 静态方法
      console.log(this)
    }
    Pig.say()
  </script>
</body>
相关推荐
码农小河6642 分钟前
基于PHP的电商后台蜜罐系统
开发语言·php
starzy19901 小时前
深入理解Scala柯里化函数:函数链式变换
开发语言·scala
ShineWinsu1 小时前
对于Qt:QTreeWidget常见属性以及QTreeWidgetItem类的解析
开发语言·c++·qt·gui·客户端·多叉树·qtreewidget
落羽的落羽2 小时前
【C++】C++17的主要特性
linux·服务器·开发语言·c++·算法·机器学习
FungLeo2 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
总要学点什么2 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Lank_M5 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡935 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye5 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能
ZANE5 小时前
纯前端实现的 PDF 与图片互相转换工具技术实现
前端