-
创建和修改属性
-
创建对象
-
const myObject = {}; //字面量表示法 const myObject = new Object(); //Object() 构造函数
-
-
修改属性 ---- 对象中的数据是可变的
-
添加属性
-
const printer = {}; //添加属性 printer.on = true; printer.mode = "black and white"; printer['remainingSheetes'] = 168; printer.print = function () { console.log('The printer is printing!'); };
-
-
移除属性
-
delete printer.mode;
-
传递参数
-
传递原始类型 primitive type
-
原始类型(字符串、数字、布尔值、Null、Undefined)是不可变的。函数中的参数(所以不会有作用域覆盖)所作的任何修改都不会影响该函数外部的原始类型,而是为该函数创建一个局部副本
-
function changeToEight(n) { n = 8; // 无论 n 是什么,它此刻都是 8... 但仅仅是在这个函数中! } let n = 7; changeToEight(n); console.log(n); // 7
-
-
传递对象
-
对象是可变的。如果向函数传递一个对象,会传递一个引用给该对象。
-
let originalObject = { favoriteColor: 'red' }; function setToBlue(object) { object.favoriteColor = 'blue'; } setToBlue(originalObject); originalObject.favoriteColor; //blue
- JS中的对象是通过引用传递的,因此如果修改引用,就是在修改原始对象本身(C语言中的&引用)
-
-
同样地,将一个对象赋值给新的变量,然后改变副本,结果与上述函数参数相同。
-
const iceCreamOriginal = { Andrew: 3, Richard: 15 }; const iceCreamCopy = iceCreamOriginal; console.log(iceCreamCopy.Richard); //15 iceCreamCopy.Richard = 99; console.log(iceCreamCopy.Richard); //99 console.log(iceCreamOriginal.Richard); //99
-
-
-
-
两个对象的比较
-
const parrot = { group: 'bird', feathers: true, chirp: function () { console.log('Chirp chirp!'); } }; const pigeon = { group: 'bird', feathers: true, chirp: function () { console.log('Chirp chirp!'); } }; console.log(parrot === pigeon); //false const myBird = parrot; console.log(myBird === parrot); //true console.log(myBird === pigeon); //false
- 只有在将同一个对象的两个引用进行比较时,才会返回true
-
-
-
调用对象方法
-
调用方法
-
const developer = { name: 'Andrew', sayHello: function () { console.log('Hi there!'); } }; developer.sayHello(); developer['sayHello']();
- 数组调用
-
-
-
const myArray = [function alerter() {alter('Hello!'); } ]; //调用alerter()函数 myArray[0]();
-
-
访问自身属性
-
this
-
const triangle = { type: 'scalene', identify: function () { console.log(`This is a ${this.type} triangle.`); } }; triangle.identify(); // 'This is a scalene triangle.'
- 当identify( )方法被调用时,this的值会被设置为调用它的对象.
-
-
-
定义方法
-
定义对象 --- 构造函数
-
function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } var myCar = new Car("Mazda", "Miata", 1990);
- 为对象类型创建一个函数以声明类型的名称、属性和方法;再用new创建对象实例
-
-
定义方法
-
还可以这样定义方法
-
function displayCar() { var result = `A Beautiful ${this.year} ${this.make} ${this.model}`; pretty_print(result); } function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.displayCar = displayCar; //这样 }
-
-
-
-
注意全局变量
-
this和调用--- 函数如何调用决定了函数内的this值
-
chameleon对象 由于 .lookAround() 作为一个方法被调用,因此.lookAround()中的this的值就是调用时位于点左侧的部分
-
const chameleon = { eyes: 2, lookAround: function () { console.log(`I see you with my ${this.eyes} eyes!`); //用this检索属性 } }; chameleon.lookAround();
-
-
全局window对象
-
const car = { numberOfDoors: 4, drive: function () { console.log(`Get in one of the ${this.numberOfDoors} doors, and let's go!`); } }; const letsRoll = car.drive; letsRoll();
-
当一个常规函数被调用时,this的值就是全局window对象
-
虽然 car.drive 是一个方法,但我们还是将该函数存储在一个变量 letsRoll 中。由于 letsRoll() 是作为一个常规函数调用的,因此 this 将指向它内部的 window 对象。
-
-
-
window对象
-
window对象由浏览器环境提供
-
window作为全局变量,代表了脚本正在运行的窗口暴露给JavaScript代码
-
在有标签页功能的浏览器中,每个标签都拥有自己的window对象,同一个窗口的标签页之间不会共享一个window对象
-
-
全局变量是window上的属性
-
window对象处于最高(全局)级别,每个在全局级别进行的变量声明会自动成为window对象上的一个属性
-
window.currentlyEating === currentlyEating // true
-
-
全局变量和var、let、及const
-
只有使用 var 声明的变量才会将其添加到window对象中,let、const在函数外部声明的变量,不会被作为属性添加到window对象。
-
let eating ='rice'; window.eating === eating //false
-
-
-
全局函数是window上的方法
-
function learnSomethingNew() { window.open('https://www.udacity.com/'); } window.learnSomethingNew === learnSomethingNew // true
-
-
避免全局变量
-
紧密耦合
- 紧密耦合是开发者用来表示代码过于依赖彼此细节。更改一段代码会无意中改变其他代码的功能
-
名称冲突
-
当两个(或多个)函数依赖于具有相同名称的变量时,则会发生名称冲突。
-
两个函数都会尝试更新或设置变量,但是这些更改将被相互覆盖。
-
-
-
-
-
-
提取属性和值
-
Object.keys()和Object.values()
-
const dictionary = { car: 'automobile', apple: 'healthy snack', cat: 'cute furry animal', dog: 'best friend' }; console.log(Object.keys(dictionary)); // ['car', 'apple', 'cat', 'dog'] console.log(Object.values(dictionary)); // ['automobile', 'healthy snack', 'cute furry animal', 'best friend']
-
-
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)