07 函数&对象
函数&对象
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>
夕闻道不如朝闻道
