JavaScript基础与进阶

基本概念

1.对象除了可以保持自有的属性，还可以从一个称为原型的对象继承属性。
原型式继承（prototypal inheritance）是JavaScript的核心特征
2.对象是动态的，可以增加或删除属性。
3.除了字符串、数值、true、false、null和undefined，其他值都是对象。
4.对象最常见的用法是对其属性进行创建、设置、查找、删除、检测和枚举等操作。

对象字面量

对象字面量是一个表达式，每次运算都会创建一个新的对象，其中的属性值也会重新计算。

let empty = {}; //没有任何属性的对象
let point = { x: 0, y: 0 }; //具有属性的对象 (一个名值队以一个,结束)
let book = {
  //属性名中有空格，必须用字符串表示。
  "main title": "JavaScript",
  //属性名中有特殊字符，必须用字符串表示
  "sub-title": "The Definitive Gruide", 
  //属性名可以是保留字，但尽量避免。
  for: "all audiences", 
  //属性值可以是一个对象。  
  author: {
    firstname: "David",
    lastname: "Flanagan",
  },
};

原型

1.每一个JavaScript对象（null除外,表示空引用）都和原型对象相关联。
2.所有通过对象字面量创建的对象都具有同一个原型对象。
3.通过new和构造函数创建的对象的原型就是构造函数的prototype属性引用的对象。
4.所有内置构造函数都具有一个继承自Object.prototype的原型。
通过层级的原型继承形成的链接，称为“原型链”（prototype chain）

let obj={value:100};
Object.prototype.flag="head";//所有的构造函数都具有这个属性
console.log(obj.flag);
let arr=[1,2,3,4];
// Array
console.log(arr.flag);
let str="123456";
// String
console.log(str.flag);

访问属性

let author = {
  "first name": "Tonny",
  "last-name": "Michael",
  age: 40,
};
console.log(author["first name"], author["last-name"]);

继承

属性赋值操作首先检查原型链，以此判断是否允许赋值操作。

let a={};
a.x=1;
let b=Object.create(a);
b.y=2;
b.x=100;
let c=Object.create(b);
c.z=3;
console.log(c.toString());
console.log(c.x+c.y+c.z);//105

属性访问错误

1.查询一个不存在的属性并不会报错，如果在对象o自身的属性或继承的属性中均未找到属性x，属性访问表达式o.x返回undefined。
2.但是，如果对象不存在，那么试图查询这个不存在的对象的属性就会报错。
null和undefined值都没有属性，因此查询这些值的属性会报错

let one = {};
// let one = { two: { three: 3 } };
console.log(one.two.three);
if (one) {
  if (one.two) {
    if (one.two.three) console.log(one.two.three);
  }
}
console.log(one && one.two && one.two.three);//3
console.log(one?.two?.three); //3
// Null传导运算符(运用于对象的访问,当第一个不存在就不会往下执行了)

删除属性

delete运算符可以删除对象的属性。

let auth = book.author;
delete book.author;
console.log(book, auth);

delete运算符只能删除自有属性，不能删除继承属性。

let o = { x: 1 };
delete o.x;
delete o.toString;
console.log(o, o.toString());

检测属性

判断某个属性是否存在于某个对象中，可以通过in运算符、hasOwnPreperty()和propertyIsEnumerable()方法，甚至也可以仅通过属性查询(对象.属性)。

let o = { x: 1 };
console.log("x" in o);
console.log("y" in o);
console.log("toString" in o);//in可以判断到继承下来的属性

console.log(o.hasOwnProperty("x"));
console.log(o.hasOwnProperty("y"));
console.log(o.hasOwnProperty("toString"));//判断当前对象自己的属性

console.log(o.propertyIsEnumerable("x"));
console.log(o.propertyIsEnumerable("y"));
console.log(o.propertyIsEnumerable("toString"));//toString是不可枚举的
console.log(Object.prototype.propertyIsEnumerable("toString"));

枚举属性

1.for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承的属性)，把属性名称赋值给循环变量。
对象继承的内置方法是不可枚举的，但在代码中给对象添加的属性都是可枚举的

let o =Object.create({m:10,n:20});
o.x=1; o.y=2; o.z=3;
for (let p in o) {
  console.log(p, o[p]);
} //遍历出五个

2.Object.keys()，它返回一个数组，这个数组由对象中可枚举的自有属性的名称组成。

let o = Object.create({ m: 10, n: 20 });
o.x = 1; o.y = 2; o.z = 3;
console.log(Object.keys(o));
console.log(Object.entires(o));//输出三个数组
console.log(Object.keys(o));//输出属性
console.log(Object.values(o));//输出值

3.Object.getOwnPropertyNames()，它和Ojbect.keys()类似，只是它返回对象的所有自有属性的名称，而不仅仅是可枚举的属性。

let o = Object.create({ m: 10, n: 20 });
o.x = 1; o.y = 2; o.z = 3;
console.log(Object.getOwnPropertyNames(o));

属性getter和setter

属性值可以用一个或两个方法替代，这两个方法就是getter和setter。
当程序查询存取器属性的值时，JavaScript调用getter方法(无参数)。
当程序设置一个存取器属性的值时，JavaScript调用setter方法，将赋值表达式右侧的值当做参数传入setter。

let circle = {
  r: 10,
  get round() {
    return 2 * this.r * Math.PI;
  },
  set round(v) {
    this.r = v / 2 / Math.PI;
  },   //可读可写
  get area() {
    return Math.PI * this.r ** 2;
  },   //只读
};
console.log(circle.round, circle.area);
circle.round = 60;
console.log(circle.r, circle.area);

和数据属性一样，存取器属性是可以继承的，但存取器属性是不会自己创建的

属性的特性

值(value)、可写性(writable)、可枚举性(enumerable)和可配置性(configurable)。

• 可写，表明是否可以设置属性的值。
• 可枚举，表明是否可以通过for/in结构返回该属性。
• 可配置，表明是否可以删除或修改该属性。