js 对象补充

js 对象

普通对象与对象简写

• js 没有字典类型，只有对象类型，对象可以完全替代字典来使用
• js 中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
• 对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
• 如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}

var dic_obj = {
 // 属性：值（数值，函数）
 'name': 'Santa',
 'eat': function () {
     console.log('在吃饭')
 }
};

console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();

// 属性省略引号，方法简写
var height = 180
var p = {
 height,
 name: 'Santa',
 eat(){}
};
console.log(p.name, p.height);

第一种类（了解）

// 第一种声明类的方法
 class People {
     constructor (name) {
         this.name = name
     }
     eat () {
         console.log(this.name + '在吃饭')
     }
 }
 let p1 = new People('Bob');
 let p2 = new People('Tom');
 console.log(p1.name, p2.name);
 p1.eat();

第二种类（了解）

// 第二种声明类的方法(难点)：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name) {
 this.name = name;
 this.eat =function () {
     console.log(this.name + '在吃饭')
 }
}
let t1 = new Teacher('Owen');
t1.eat();

类属性

// 类属性：给类属性赋值，所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();

// 赋值类属性
Fn.prototype.num = 100;

console.log(f1.num);
console.log(f2.num);

// 类似于单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

js 函数补充

// 1）函数的形参与调用时传入的实参关系（你传你的，我收我的）
//      传入和接受的参数个数不需要一致
//      但是一定按位进行赋值（没有关键字参数）
//      没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined
function fn1(a, b) {
 console.log(a, b);
 return a + b;
}

let res = fn1(10, 20, 30);
console.log(res);

// 2）函数定义的演变
let fn2 = function (a, b) {
 return a + b;
};

// 省略关键字的箭头函数
let fn3 = (a, b) => {
 return a + b;
};

// 没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也省略
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));

// 如果形参只有一个时，声明参数的()也可以省略
let fn5 = num => num * num;
console.log(fn5(3));

// 弱语言
console.log(10 + '5');  // 105
console.log(10 - '5');  // 5
console.log(+'55555');  // 55555

总结：

1）对象就可以作为字典，属性名都是字符串，可以省略引号
2）属性值时变量同属性名，可以简写
3）{}中的属性值为函数，称之为方法，也可以简写

4）定义的函数，函数名大写，且函数内部有this，代表类
5）可以通过 类.prototype.类属性 实现所以对象共享