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>

fun01

 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>

fun02

 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>

fun03

 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>

fun04

 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>

fun05

 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>

fun06

 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>

fun07

 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>

fun08

 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>

json1

 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>

obj01

 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>

obj02

 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>

obj03

 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>

obj04

 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>

obj05

 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);//false
17 
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>

obj06

 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>

obj07

 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>

obj08

 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>

obj09

 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>

obj10

 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>

close01

 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>

jicheng01

 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>

jicheng02

 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>

jicheng03

相关阅读:
通过JavaMail发送(群发)邮件示例(内含附件图片) 代码复制可用
 需要把获取系统的当前时间存入库里获取时是String类型，库里是Datetime类型 String 转化 Date
用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
Svg和canvas的区别，伪类选择器有哪些（归类）
微信web网页动态增减输入框，搜索框，基于jQuery weui、jQuery 实现无限插入数据，动态数据生成，外加高德地图POI和根据坐标获取位置信息的页面
 vue 使用tinymce富文本编辑器
 mamp环境下navicat无法链接本地mysql
tp5 系统变量输出
 开始项目注意事项
 jQuery weui实现下拉刷新事件
原文地址：https://www.cnblogs.com/qiyebao/p/4168645.html