函数&对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-U-Compatible" content="IE-edge">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <title>函数&对象</title>
8 </head>
9 <body>
10 <h1>函数</h1>
11 <p>函数：就是把将一些语句进行封装，然后通过调用的形式，执行这些语句</p>
12 <p>function：是一个关键字。中文是“函数”、“功能”。
13 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
14 参数：后面有一对小括号，里面是放参数用的。
15 大括号里面，是这个函数的语句。</p>
16 <script type="text/javascript">
17 // 申明
18 function add(x,y) {
19 var sum = x + y;
20 console.log(sum);
21 return sum;
22 }
23
24 // 调用
25 var sum = add(1,2);
26 console.log(sum);
27
28 // 匿名函数
29 var multipy = function (x,y) {
30 return x*y;
31 };
32 console.log(multipy(2,5));
33
34 // 伪数组 arguments 只在函数中使用 类似于python里的 args和kwargs
35 function args(m,n) {
36 console.log(args.length); //获取形参的个数
37 console.log(arguments); //获取实参
38 console.log(arguments.length); //获取实参的个数
39 console.log(arguments[0]); // 获取第一个实参
40 // arguments.push('4'); // 不可以修改 伪数组 会报错
41 }
42 args(1,2);
43 args(1,2,3);
44 args(1,2,3,4);
45 </script>
46
47 <h1>面向对象</h1>
48 <script type="text/javascript">
49 var eat = function (food) {
50 console.log(this.name + ' is eating ' + food)
51 };
52 // 1.使用Object或对象字面量创建对象
53 var obj = {'name':'晓钢','age':18,'eat':eat}; // 第一种，也就是json对象，也是python里的字典
54 var obj1 = new Object(); // 第二种 new object
55 obj1.name = '晓康';
56 obj1.age = 28;
57 obj1.eat = eat; // 也可以指定方法
58 console.log(obj,typeof obj); // {name: "xg", age: 18} "object"
59 console.log(obj1,typeof obj1); // {name: "xg", age: 18} "object"
60 console.log(obj.age); // 调用对象属性
61 obj.eat('rice'); // 调用属性方法
62 obj1.eat('apple');
63
64 // 2.工厂模式创建对象 就是把对象的字面量用函数包装，可以不听的调用来生成对象
65 var createObj = function (name,age,func) {
66 var obj = new Object();
67 obj.name = name;
68 obj.age = age;
69 obj.func = func;
70 return obj
71 };
72 var obj2 = createObj('小肖',12,eat);
73 var obj3 = createObj('小红',32,eat);
74 var obj4 = createObj('小干',22,eat);
75 console.log(obj2.name);
76 console.log(obj3.age);
77 obj3.func('shit');
78
79 // 3.构造函数模式创建对象
80 /* 几点说明
81 1.js中并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。
82 对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
83 2.约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。如 new Array()
84 3.使用new操作符调用构造函数时，会经历4个步骤
85 (1)创建一个新对象；
86 (2)将构造函数作用域赋给新对象（使this指向该新对象）；
87 (3)执行构造函数代码；
88 (4)返回新对象；4个阶段。
89 */
90 function Person(name,age) {
91 this.name = name;
92 this.age = age;
93 this.eat = eat;
94 }
95 function Fruit(name,price) {
96 this.name = name;
97 this.price = price;
98 }
99 var p1 = new Person('小明',18);
100 var p2 = new Person('小金',28);
101 var f1 = new Fruit('苹果',12);
102 var f2 = new Fruit('芒果',8);
103 console.log('p1:' + typeof p1,' | p2:' + typeof p2);
104 console.log('f1:' + typeof f1,' | f2:' + typeof f2);
105 console.log('p1 instanceoof Person : ',p1 instanceof Person);
106 console.log('p1 instanceof Fruit : ',p1 instanceof Fruit);
107 console.log('f1 instanceof Person : ',f1 instanceof Person);
108 console.log('f1 instanceof Fruit : ',f1 instanceof Fruit);
109 console.log(p1.name + "|" + p2.name+ "|" +f1.name + "|" + f2.name);
110 p1.eat('香蕉');
111
112 // 4.原型模式创建对象
113 function Student() {
114 this.name = 'easy';
115 this.age = 20;
116 }
117 Student.prototype.alertName = function(){
118 alert(this.name);
119 };
120 var stu1 = new Student();
121 var stu2 = new Student();
122 stu1.alertName(); //easy
123 stu2.alertName(); //easy
124 alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
125 </script>
126 </body>
127 </html>