练习所有老师的代码,加上自己的备注和理解。(控制台输出都正确)
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例