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

时间： 2025-01-07 12:47:53

javascript中function和object的区别,以及javascript如何实现面向对象的编程思想.的相关文章

JavaScript中Function和Object的关系

今天,QQ技术讨论群里面有一个人在聊天,说今天面试,面试官问他的第一个问题他就懵逼了,说是Function和Object的关系,或者说他们有什么区别.当时我微微一笑,心想这么简单的问题你都解释不清楚,那你竟然还有信心去面试.可是,当我试图组织语言来嘲讽他几句时,发现我也组织不清楚.痛定思痛,一步一步来屡一下他们之间的关系. 首先,Function是一个构造函数,那它一定就有它对应的原型对象Function.prototype,我们使用控制台打印可以得出Function.prototype=fun

javascript中Function与Object

1. 先来一段代码: console.log(Function); // function Function() { [native code] } console.log(Object); // function Object() { [native code] } console.log(Function.prototype); // function () {} console.log(Object.prototype); // Object {} console.log(Function

javaScript中__proto__与prototype的区别与联系

[转]javaScript中__proto__与prototype的区别与联系 2014-5-4阅读490 评论0 最近在学习javascript的原型,发现了__proto__与prototype,学问很大,于是研究了一下. 首先解释一下什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 对象又是什么呢? 在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,array,string),那它

javascript 中 typeof 和 instanceof 的区别

在 javascript 中经常会用到 typeof 和 instanceof 来判断一个对象的类型,可能 typeof 用得多些,那来看看这两个之间的区别吧. typeof : typeof 是一个一元运算符,放在一个运算数之前,运算数可以是任意类型.它返回值是一个字符串,该字符串说明运算数的类型. typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined. ? 1 2 3 4 5 6 7 8 <script typ

javascript中undefined和null的区别详解

一.问题的由来 永远不要直接使用undefined进行变量判断使用字符串"undefined"对变量进行判断 这里,undefined是原始值,在JS中undefined出现只有两种情况,一种是变量未定义.一种是定义了变量,但是没有赋值. 如果这个地方person未定义,那么利用person===undefined全等判断就会报错,person未定义但是如果使用typeof来判断,那么就不会报错了. ep: alert(person == undefined);//报错 person

JavaScript中Element与Node的区别，children与childNodes的区别

关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 更多节点类型参考:https://developer.m

JavaScript的数据类型都有什么？ JavaScript中 toStirng() 与 Object.prototype.toString().call()

JavaScript的数据类型都有什么? (via  BAT互联网公司2014前端笔试面试题:JavaScript篇  http://www.sxt.cn/u/756/blog/4508) 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型: Object(Array,Date,RegExp,Function) 疑问:这些基本的数据类型的值都是常量,而常量是没有方法的,为什么能够调用方法呢?答案是这样的,五种基本类型除了null.undefin

Javascript 中childNodes和children的区别

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

JavaScript中:表达式和语句的区别

JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由":(分号)"分隔的句子或命令.如果在表达式后面加上一个":"分隔符,这就被称为"表达式语句".它表明"只有表达式,而没有其他语法元素的语句" 原文:http://www.2ality.com/2012/09/expressions-vs-statements.html 本文要讲