js对象补充
普通对象与对象简写
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// 1）js没有字典类型，只有对象类型，对象可以完全替代字典来使用
// 2）js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
// 3）对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
// 4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}
var dic_obj = {
// 属性：值（数值，函数）
'name': 'Bob',
'eat': function () {
console.log('在吃饭')
}
};
console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();
// 属性省略引号，方法简写
var obj = {
name: 'Tom',
eat () {
console.log('在吃饭...')
}
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()
// 属性变量简写
var height = 180;
var p = {
height,
name: 'Jerry',
eat() {}
};
console.log(p.name, p.height);
</script>
</html>
第一种类(了解)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// js中的类
// 第一种声明类的方法
class People {
constructor (name) {
this.name = name // 类似python中类中的__init__，此处为赋值；this指的是对象
}
eat () {
console.log(this.name + '在吃饭')
}
}
let p1 = new People('Bob');
let p2 = new People('Tom');
console.log(p1.name, p2.name);
p1.eat();
</script>
</html>
第二种类(了解)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// 第二种声明类的方法(难点)：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name) {
this.name = name;
this.eat =function () {
console.log(this.name + '在吃饭')
}
}
let t1 = new Teacher('Owen');
t1.eat();
</script>
</html>
类属性
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// 类属性：给类属性赋值，所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
// 赋值类属性
Fn.prototype.num = 100; // 给类赋值属性，下面调用类似单例
console.log(f1.num);
console.log(f2.num);
// 利用Vue这个类，进行赋值，下面的调用类似单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);
</script>
</html>
js函数补充
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js函数</title>
</head>
<body>
</body>
<script>
// 1）函数的形参与调用时传入的实参关系（你传你的，我收我的）
// 传入和接受的参数个数不需要一致
// 但是一定按照位置进行赋值（没有关键字参数，只有形参）
// 没有接收的实参会被遗弃(传入3个数据，只有2个形参，剩下的一个会被遗弃掉)
// 没有被赋值的形参会被赋值为undefined(传入2个数据，却有3个形参，最后一个形参会赋值为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));
</script>
</html>
补充
强语言与弱语言
强语言：Python
3 + '3'
# 不同的数据类型不能运算，严格区分数据类型
弱语言：JavaScript
// 弱语言
console.log(10 + '5'); // 数字和字符串相加，结果为105，将数字自动转为字符串，进行拼接
console.log(10 - '5'); // 数字和字符串相减，结果为5，将字符串自动转为数字，进行计算
console.log(+'55555'); // 一元运算，可以快速的把字符串类型的数据转为数字
// 弱语言类型，javascript会自动尝试转换数据类型，进行计算和处理