收藏
批改状态：合格
老师批语：例子举的不错
练习所有老师的代码，加上自己的备注和理解。（控制台输出都正确）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象</title>
</head>
<body>
<script>
/*一、JS对象*/
var who = '李彦宏'; /*这是一个全局变量*/
/*这是一个全局函数*/
function baidu(value) {
var site = '真帅 ';
return value + site ;
}
/*函数调用*/
console.log( baidu(who) ); /*调用baidu这个函数，传的参数是一个全局变量who*/
/*最终输出 李彦宏真帅*/
/*函数表达式 是将定义函数时，不赋名，直接把函数赋给一个变量。此时可以把函数理解成一种数据类型*/
var wang = function (value) {
var site = '真帅 ';
return value + site ;
}
console.log( wang('王嘉尔') );/*调用wang这个函数，传的参数是一个字符串*/
/*最终输出 王嘉尔真帅*/
var X = 'jackson';
console.log( wang(X) );/*调用wang这个函数，传的参数是一个全局变量X*/
/*全局变量，全局函数尽量少用，容易冲突，所以可以考虑用对象来封装全局成员（全局变量、全局函数）*/
var star = {};/*可以理解为创建了一个空对象*/
star.xingge = '开朗'; /*对象的属性*/
star.xingwei = function (value) { /*对象的函数 理解为方法*/
var site = '大方';
return value + site;
}
console.log(star.xingge);/*输出对象的属性*/
console.log(star.xingwei(star.xingge)); /*调用对象的方法，传的参数可以是对象的属性*/
/*可以直接将属性和方法写到对象中*/
var star1 = {
/*属性与值之间 用冒号分开*/
/*最后不用分号*/
xingge:'幽默',
xingwei:function (value) {
var site = '搞笑';
return value + site;
}
};
console.log(star1.xingge);
console.log(star1.xingwei(star1.xingge));
/*在对象中 添加属性属性和方法，减少了全局成员的数量，针对对象进行管理也会方便很多*/
/*如何实现代码的复用？利用函数的返回值来实现，可以是任意类型的返回值*/
var star2 = function () {
/*返回一个对象*/
return{
xingge:'温柔',
xingwei:function (value) {
var site = '优雅';
return value + site;
}
}
}
/*star2这个函数，返回的是一个对象*/
var star3=star2(); /*这样可以创建一个对象star3, 它的属性和方法就是star2 中的所定义的*/
console.log(star3.xingge); /*输出star3的属性，也就是star2中定义的属性*/
console.log(star3.xingwei(star3.xingge)); /*调用star3的方法，也就是star2中定义的方法，传的参数可以是star3的属性*/
/*通过以上代码，可以看到star3的属性和方法都来自star2，
* 但在实际项目中，代码很复杂，不会这么容易看出来，那么怎么快速知道一个对象的属性和方法来自谁呢？
* 这就要通过构造函数了，构造函数可以理解为对象的祖宗，所有对象都是它的后代*/
/*创建一个构造函数*/
var star4 = function () {
/*可以理解成 这里有一个this变量的声明 var this = null*/
/*this`代表通过该函数创建的新对象*/
this.xingge = '成熟';
this.xingwei = function (value) {
var site = '稳重';
return value + site;
}
/*可以理解成 这里有一个返回语句 return this*/
}
/*构造函数的执行就是不断地将其属性和方法 赋给新的对象this，赋值时必须使用new关键字*/
var star5 = new star4(); /*通过构造函数4 创建一个新对象star5 ,这个star5 可以理解成构造函数的实例/类实例*/
console.log( star5.xingge );
console.log( star5.xingwei(star5.xingge) );
var star6 = new star4(); /*通过构造函数4 创建一个新对象star5 ,这个star5 可以理解成构造函数的实例/类实例*/
console.log( star6.xingge );
console.log( star6.xingwei(star6.xingge) );
/*这样就可以很快地创建出一个对象了*/
console.log( star5 instanceof star4 ); /*判断star5 是不是 star4 创建出来的，结果为true*/
/*注意，star5 和 star6 之间没有任何关系。修改了star5的属性，star6不会受影响*/
star5.xingge = '亲切';
console.log(star5.xingge); // 亲切
console.log(star6.xingge); // 成熟
/*如果项目业务并不复杂，不需要通过创建实例的方式来赋予新的属性和方法
* 既然函数也是对象，就可以拥有属性和方法，所以我们直接将属性和方法添加到构造函数上*/
star4.sex = '男';
star4.hobby = function () {
return '运动';
}
console.log(star4.sex );
console.log(star4.hobby());
/*直接在构造函数上定义的，是静态属性 、静态方法。
* 只能使用构造函数访问，不能通过实例访问*/
/*若想在不破坏之前构造函数的代码前提下，修改构造函数某些属性和方法，但想被其他实例使用，可以通过原型属性prototype
* 任何函数都有一个prototype原型属性，该属性的值是一个对象，可以对其添加属性和方法*/
star4.prototype.sex = '女';
star4.prototype.hobby = function () {
return '唱歌';
}
console.log(star5.sex);
console.log(star5.hobby());
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
