首页 > 代码库 > javascript中function和object的区别,以及javascript如何实现面向对象的编程思想.
javascript中function和object的区别,以及javascript如何实现面向对象的编程思想.
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function aa() { 8 window.alert("aa"); 9 }10 var bb = function () {11 window.alert("bb");12 }13 var cc = new Function("window.alert(‘cc‘);");14 window.alert(typeof cc);15 </script>16 </head>17 <body>18 19 </body>20 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function fn1() { 8 window.alert("fn1"); 9 }10 11 //fn1();12 var fn2 = fn1;13 14 fn2();15 16 fn1 = function () {17 window.alert("new fn1");18 };19 20 fn2();21 22 fn1();23 24 </script>25 </head>26 <body>27 28 </body>29 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function sum1(a, b) { 8 return a + b; 9 }10 function sum1(a) {11 return a + a;12 }13 //window.alert(sum1(4, 5));14 window.alert(sum1(4,5));15 16 </script>17 </head>18 <body>19 20 </body>21 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>function 参数</title> 6 <script language="javascript" type="text/javascript"> 7 function callFun(fun, arg) { 8 return fun(arg); 9 }10 11 function say(name) {12 window.alert(name);13 }14 15 //say("wyp");16 callFun(say, "wyp");17 18 function say(name) {19 window.alert("new " + name);20 }21 callFun(say, "wyp");22 23 var cc = new Function("name", "say(name)");24 cc("wangyp");25 26 27 28 var ss = [1, 2, 11, 13, 12, 119];29 window.alert(ss);30 ss.sort(sortBy);31 window.alert(ss);32 33 function sortBy(a, b) {34 return a - b;35 }36 </script>37 </head>38 <body>39 40 </body>41 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>function 返回值</title> 6 <script language="javascript" type="text/javascript"> 7 //function fn1(a) { 8 // var fnn1 = function (b) { 9 // return a + b;10 // }11 // return fnn1;12 //}13 //var fn11 = fn1(3);14 //window.alert(fn11(4));15 16 function compareProp(prop) {17 var fn1 = function (obj1, obj2) {18 if (obj1[prop] > obj2[prop]) return 1;19 else if (obj1[prop] < obj2[prop]) return -1;20 return 0;21 }22 return fn1;23 }24 25 var person1 = { name: ‘wyp‘, age: 33 };26 var person2 = { name: ‘zyx‘, age: 23 };27 var person3 = { name: ‘hg‘, age: 27 };28 var persons = [person1, person2, person3];29 //for (var i = 0 ; i < persons.length; i++) {30 // window.alert(persons[i].name + "," + persons[i].age);31 //}32 var comparePropFun = compareProp("name");33 persons.sort(comparePropFun);34 for (var i = 0 ; i < persons.length; i++) {35 window.alert(persons[i].name + "," + persons[i].age);36 }37 </script>38 </head>39 <body>40 41 </body>42 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 //function fn() { 8 // window.alert(arguments.length); 9 // var result = 0;10 // for (var i = 0 ; i < arguments.length ; i++) {11 // result += arguments[i];12 // }13 // return result;14 //}15 16 //window.alert(fn(1, 3, 5));17 18 19 function sum(num) {20 if (num == 1) {21 return 1;22 }23 else {24 return num * arguments.callee(num - 1);25 //return num * sum(num - 1);26 }27 }28 //window.alert(sum(3));29 30 var fn = sum;31 sum = null;32 window.alert(fn(3));33 34 </script>35 </head>36 <body>37 38 </body>39 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Person(name, age) { 8 this.name = name; 9 this.age = age;10 }11 window.alert(typeof Person);12 var person = new Person("wyp",33);13 //person.name = "wyp";14 window.alert(typeof person);15 window.alert(person.name);16 17 18 //function Person(name, age) {19 // window.alert(arguments.length);20 //}21 22 //window.alert(Person.length);23 //Person(10);24 </script>25 </head>26 <body>27 28 </body>29 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 var person1 = { name: "wyp", age: 33 }; 8 var person2 = { name: "cr", age: 29 }; 9 10 function show(a, b) {11 window.alert("name=" + this.name + ",a=" + a + ",b=" + b);12 }13 show(3, 4);14 show.apply(person1, [3, 4]);15 show.call(person2, 3, 4);16 </script>17 </head>18 <body>19 20 </body>21 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 var person = ‘{ name: "wyp", age: 32 }‘; 8 //var obj = eval("(" + person + ")"); 9 var obj = new Function("return " + person)();10 window.alert(obj.name);11 </script>12 </head>13 <body>14 15 </body>16 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 //var aa = new Array(); 8 //var aa = new Object(); 9 var aa = {10 11 };12 13 aa[0] = "wyp";14 aa[1] = "wangyunpeng";15 aa.name = "shuaige";16 //aa["name"];17 //aa.name;18 window.alert(aa[1]);19 </script>20 </head>21 <body>22 23 </body>24 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 var person = { name: "wyp", age: 32 }; 8 person.sex = true; 9 window.alert(person.name);10 11 </script>12 </head>13 <body>14 15 </body>16 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 //var obj1 = { name: ‘wyp‘ }; 8 //var obj2 = obj1; 9 //window.alert(obj2.name);10 //obj1.name = "wangyunpeng";11 //window.alert(obj2.name);12 13 var obj = { name: "ddd" };14 15 </script>16 </head>17 <body>18 19 </body>20 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 //var person = new Object(); 8 //person.name = ‘wyp‘; 9 //person.age = 33;10 //person.say = function () {11 // window.alert(this.name);12 //}13 //person.say();14 15 var person = {16 name: "wyp",17 age: 33,18 say: function () {19 window.alert(this.name);20 }21 }22 person.say();23 </script>24 </head>25 <body>26 27 </body>28 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 var Person = function () { 8 9 };10 11 var person = new Person();12 window.alert(person instanceof Person);13 </script>14 </head>15 <body>16 17 </body>18 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Person(name ,age) { 8 this.name = name; 9 this.age = age;10 this.say = function () {11 window.alert(this.name);12 }13 }14 var person1 = new Person("wyp", 33);15 var person2 = new Person("hg", 29);16 window.alert(person1.say == person2.say);//false17 18 person1.say = function () {19 window.alert(this.age);20 }21 person1.say();22 23 person2.say();24 25 </script>26 </head>27 <body>28 29 </body>30 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Person() { 8 9 }10 Person.prototype.name = "wyp";11 Person.prototype.age = 33;12 Person.prototype.say = function () {13 window.alert(this.name);14 }15 16 var person1 = new Person();17 var person2 = new Person();18 person2.name = "hg";19 person2.age = 29;20 person1.say();21 person2.say();22 </script>23 </head>24 <body>25 26 </body>27 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Person() { 8 9 }10 Person.prototype = {11 constructor: Person,12 name: "wyp",13 age: 33,14 works: [‘gh‘, ‘zyx‘],15 say: function () {16 window.alert(this.name + ",[" + this.works + "]");17 }18 };19 var person1 = new Person();20 person1.name = "wyp";21 person1.works.push("db");22 person1.say();23 24 var person2 = new Person();25 person2.name = "sl";26 person2.say();27 28 </script>29 </head>30 <body>31 32 </body>33 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Person(name, age, works) { 8 this.name = name; 9 this.age = age;10 this.works = works;11 if (!Person.prototype.say) {12 Person.prototype.say = function () {13 window.alert(this.name + ",[" + this.works + "]");14 }15 }16 }17 18 var person1 = new Person("wyp", 33, [‘hg‘, ‘zyx‘]);19 person1.works.push(‘db‘);20 //person1.say = function () {21 // window.alert(this.age);22 //};23 var person2 = new Person("gh", 29, [‘hg‘, ‘zyx‘]);24 25 person1.say();26 person2.say();27 28 window.alert(person1.say == person2.say);29 </script>30 </head>31 <body>32 33 </body>34 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 //function Person(name, age) { 8 // this.name = name; 9 // this.age = age;10 // this.say = say;11 //}12 13 function Person() {14 15 }16 17 Person.prototype.name = "name";18 Person.prototype.age = 33;19 Person.prototype.say = function () {20 window.alert(this.name);21 }22 23 function say() {24 window.alert(this.name);25 }26 27 var person1 = new Person("wyp", 33);28 person1.name = "wyp";29 person1.say = function () {30 window.alert(this.age);31 }32 var person2 = new Person("gh", 29);33 window.alert("person1.say == person2.say:" + (person1.say == person2.say));34 35 36 window.alert("prototype.isPrototypeOf:" + Person.prototype.isPrototypeOf(person1));37 38 window.alert("constructor:" + (person1.constructor == Person));39 40 window.alert("name:" + person1.hasOwnProperty("name"));41 42 //delete person1.name;43 //window.alert("name:" + person1.hasOwnProperty("name"));44 45 window.alert(" [in] " + ("name" in person1));46 47 48 function isPrototypeProperty(obj,prop) {49 return (!(obj.hasOwnProperty(prop)) && (prop in obj));50 }51 </script>52 </head>53 <body>54 55 </body>56 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 ( function (num) { 8 for (var i = 0; i < num; i++) { 9 10 }11 } )(20);12 window.alert(i);13 </script>14 </head>15 <body>16 17 </body>18 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Parent() { 8 this.pv = "parent"; 9 }10 11 Parent.prototype.showParent = function () {12 window.alert(this.pv);13 }14 15 function Child() {16 this.cv = "child";17 }18 19 Child.prototype = new Parent();20 21 Child.prototype.showChild = function () {22 window.alert(this.cv);23 }24 25 var child= new Child();26 //window.alert(child.pv);27 child.showParent();28 child.showChild();29 30 31 </script>32 </head>33 <body>34 35 </body>36 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Parent(name) { 8 this.color = [‘red‘, ‘blue‘]; 9 this.name = name;10 this.say = say;11 }12 function say() {13 window.alert(this.name);14 }15 16 function Child(name, age) {17 this.age = age;18 Parent.call(this, name);19 }20 21 var child1 = new Child("wyp", 33);22 //child1.color.push("yellow");23 //window.alert(child1.color);24 //window.alert(child1.name);25 //window.alert(child1.age);26 var child2 = new Child("meinv", 23);27 //window.alert(child1.name + "," + child1.age);28 //window.alert(child2.name + "," + child2.age);29 child1.say = function () {30 window.alert(child1.age);31 }32 child1.say();33 child2.say();34 </script>35 </head>36 <body>37 38 </body>39 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script language="javascript" type="text/javascript"> 7 function Parent(name) { 8 this.name = name; 9 if(!Parent.prototype.say){10 Parent.prototype.say = function () {11 window.alert(this.name);12 };13 }14 }15 //Parent.prototype = {};16 17 18 19 function Child(name, age) {20 this.age = age;21 Parent.call(this, name);22 }23 24 Child.prototype = new Parent();25 26 //重写父类say方法27 //Child.prototype.say = function () {28 // window.alert(this.name + "," + this.age);29 //};30 31 var child1 = new Child("wyp", 33);32 child1.say();33 34 35 36 </script>37 </head>38 <body>39 40 </body>41 </html>
javascript中function和object的区别,以及javascript如何实现面向对象的编程思想.
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。