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会自动尝试转换数据类型,进行计算和处理
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。