JavaScript核心技术:window, document, console与函数、作用域和对象详解

需积分: 14 0 下载量 87 浏览量 更新于2024-08-04 收藏 4KB MD 举报
本文主要介绍了JavaScript(JS)中的几个关键概念和语法,包括函数、块级作用域、对象、类构造函数以及数组操作。以下是对这些主题的详细解释: ### 1. 函数与作用域 #### 1.1 函数与箭头函数 - **函数**:在JS中,函数是一种特殊的对象,可以通过`function`关键字定义。例如,`sum`函数用于求和,其定义为`function sum() {}`。箭头函数,如`()=> {}`,是ES6引入的新特性,它在`this`指向方面有特殊行为,箭头函数内部的`this`总是绑定到创建它的词法作用域,即通常指向`window`。 #### 1.2 隐式绑定与函数调用 - **函数中的隐式绑定**:`apply()`、`call()`和`bind()`方法用于改变函数的`this`指向。`apply(obj, [])`将数组中的元素作为参数传递给函数,`call(obj, param1, param2)`直接指定函数的上下文对象,`bind(obj, param1, param2)`返回一个新的函数实例,保留原函数的上下文。 ### 2. 块级作用域 - **变量作用域**:JS中,`var`和`function`声明的变量具有函数作用域,而不是块级作用域。这意味着在花括号内定义的变量不会在块级外部可见。此外,`var`变量声明会被提升到其所在函数的顶部,即使在声明之前使用也不影响。 ### 3. 对象与异步处理 - **Promise**:Promise是处理异步操作的一种解决方案,通过`resolve()`和`reject()`方法来控制操作的流程。`then()`、`catch()`和`finally()`方法用于链式处理异步操作,避免回调地狱问题。 - **JSON**:`JSON.parse()`用于将字符串转换为JavaScript对象,而`JSON.stringify()`则是将对象转换为JSON格式的字符串。 ### 4. 类构造函数 - **通过`new`关键字创建对象**:通过`Promise()`、`Array()`等构造函数可以创建新的对象实例,例如`Promise()`用于创建Promise对象,`Array()`创建数组等。 ### 5. 数组操作 - **数组方法**:`pop()`、`unshift()`、`push()`和`shift()`用于修改数组。`delete()`、`indexOf()`和`lastIndexOf()`用于查找和删除元素。`join()`、`toString()`和`concat()`用于数组的拼接。`splice()`方法用于插入、删除或替换数组元素,`split()`用于字符串分割,`reverse()`和`sort()`进行排序,`forEach()`则遍历数组并执行指定操作。 这篇文章深入讲解了JavaScript的关键字和常用语法,涵盖了函数、作用域、对象操作、类构造和数组处理等多个方面,对理解JavaScript编程基础大有裨益。

import * as THREE from 'three'; let moveFlag = false; var point = new THREE.PointLight(0xffffff, 1, 100); // point.position.set(0, 0, 0); const sphereSize = 0.5;//辅助对象的大小 const pointLightHelper = new THREE.PointLightHelper(point, sphereSize, 0xFF00FF); // const axisHelper = new THREE.AxesHelper(5); export default function pointLight(vis) { let domContainer = document.getElementById('threeContainer'); if (vis) { window.controls.enableRotate = false; domContainer?.addEventListener('mousedown', onmousedown); domContainer?.addEventListener('mousemove', onmousemove); domContainer?.addEventListener('mouseup', onmouseup); window.controls.addEventListener("change", onPointerMove); // 增加点光源 window.threescene.add(point); // 需要捕获鼠标点击未松开时的位置作为点光源的位置 window.threescene.add(pointLightHelper); } else { // 卸载点光源 } } // 写个方法开始获取鼠标按下事件,然后将坐标位置转化为三维坐标 // 进入了这个页面就不再触发模型拖动事件了 function onmousedown(event) { moveFlag = true; console.log(event, 'mousedown事件'); } function onmousemove(event) { if (moveFlag) { console.log('mousemove事件'); const mouseX = event.clientX; const mouseY = event.clientY; const vector = new THREE.Vector3( (mouseX / window.innerWidth) * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1, 0.5 ); vector.unproject(window.camera); const dir = vector.sub(window.camera.position).normalize(); const distance = -window.camera.position.z / dir.z; const pos = window.camera.position.clone().add(dir.multiplyScalar(distance)); console.log(pos,'pos'); point.position.copy(pos); console.log(point.position,'point'); pointLightHelper.light = point; } } function onmouseup() { moveFlag = false; console.log('mouseup事件'); } function onPointerMove() { // 如何取消调拖拽事件,而取消查看点光源后再打开 // 操作render函数吗 console.log('change事件'); }

2023-05-31 上传