创建和修改属性
创建对象
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']
object in depth
猜你喜欢
转载自www.cnblogs.com/wydumn/p/11575477.html
今日推荐
周排行