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

2022-09-28 16:14:56

 <!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 language="javascript" type="text/javascript">

         function aa() {

             window.alert("aa");

         }

         var bb = function () {

             window.alert("bb");

         }

         var cc = new Function("window.alert('cc');");

         window.alert(typeof cc);

     </script>

 </head>

 <body>

 </body>

 </html>

fun01

 <!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 language="javascript" type="text/javascript">

         function fn1() {

             window.alert("fn1");

         }

         //fn1();

         var fn2 = fn1;

         fn2();

         fn1 = function () {

             window.alert("new fn1");

         };

         fn2();

         fn1();

     </script>

 </head>

 <body>

 </body>

 </html>

fun02

 <!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 language="javascript" type="text/javascript">

         function sum1(a, b) {

             return a + b;

         }

         function sum1(a) {

             return a + a;

         }

         //window.alert(sum1(4, 5));

         window.alert(sum1(4,5));

     </script>

 </head>

 <body>

 </body>

 </html>

fun03

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>function 参数</title>

     <script language="javascript" type="text/javascript">

         function callFun(fun, arg) {

             return fun(arg);

         }

         function say(name) {

             window.alert(name);

         }

         //say("wyp");

         callFun(say, "wyp");

         function say(name) {

             window.alert("new " + name);

         }

         callFun(say, "wyp");

         var cc = new Function("name", "say(name)");

         cc("wangyp");

         var ss = [1, 2, 11, 13, 12, 119];

         window.alert(ss);

         ss.sort(sortBy);

         window.alert(ss);

         function sortBy(a, b) {

             return a - b;

         }

     </script>

 </head>

 <body>

 </body>

 </html>

fun04

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>function 返回值</title>

     <script language="javascript" type="text/javascript">

         //function fn1(a) {

         //    var fnn1 = function (b) {

         //        return a + b;

         //    }

         //    return fnn1;

         //}

         //var fn11 = fn1(3);

         //window.alert(fn11(4));

         function compareProp(prop) {

             var fn1 = function (obj1, obj2) {

                 if (obj1[prop] > obj2[prop]) return 1;

                 else if (obj1[prop] < obj2[prop]) return -1;

                 return 0;

             }

             return fn1;

         }

         var person1 = { name: 'wyp', age: 33 };

         var person2 = { name: 'zyx', age: 23 };

         var person3 = { name: 'hg', age: 27 };

         var persons = [person1, person2, person3];

         //for (var i = 0 ; i < persons.length; i++) {

         //    window.alert(persons[i].name + "," + persons[i].age);

         //}

         var comparePropFun = compareProp("name");

         persons.sort(comparePropFun);

         for (var i = 0 ; i < persons.length; i++) {

             window.alert(persons[i].name + "," + persons[i].age);

         }

     </script>

 </head>

 <body>

 </body>

 </html>

fun05

 <!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 language="javascript" type="text/javascript">

         //function fn() {

         //    window.alert(arguments.length);

         //    var result = 0;

         //    for (var i = 0 ; i < arguments.length ; i++) {

         //        result += arguments[i];

         //    }

         //    return result;

         //}

         //window.alert(fn(1, 3, 5));

         function sum(num) {

             if (num == 1) {

                 return 1;

             }

             else {

                 return num * arguments.callee(num - 1);

                 //return num * sum(num - 1);

             }

         }

         //window.alert(sum(3));

         var fn = sum;

         sum = null;

         window.alert(fn(3));

     </script>

 </head>

 <body>

 </body>

 </html>

fun06

 <!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 language="javascript" type="text/javascript">

         function Person(name, age) {

             this.name = name;

             this.age = age;

         }

         window.alert(typeof Person);

         var person = new Person("wyp",33);

         //person.name = "wyp";

         window.alert(typeof person);

         window.alert(person.name);

         //function Person(name, age) {

         //    window.alert(arguments.length);

         //}

         //window.alert(Person.length);

         //Person(10);

     </script>

 </head>

 <body>

 </body>

 </html>

fun07

 <!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 language="javascript" type="text/javascript">

         var person1 = { name: "wyp", age: 33 };

         var person2 = { name: "cr", age: 29 };

         function show(a, b) {

             window.alert("name=" + this.name + ",a=" + a + ",b=" + b);

         }

         show(3, 4);

         show.apply(person1, [3, 4]);

         show.call(person2, 3, 4);

     </script>

 </head>

 <body>

 </body>

 </html>

fun08

 <!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 language="javascript" type="text/javascript">

         var person = '{ name: "wyp", age: 32 }';

         //var obj = eval("(" + person + ")");

         var obj = new Function("return " + person)();

         window.alert(obj.name);

     </script>

 </head>

 <body>

 </body>

 </html>

json1

 <!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 language="javascript" type="text/javascript">

         //var aa = new Array();

         //var aa = new Object();

         var aa = {

         };

         aa[0] = "wyp";

         aa[1] = "wangyunpeng";

         aa.name = "shuaige";

         //aa["name"];

         //aa.name;

         window.alert(aa[1]);

     </script>

 </head>

 <body>

 </body>

 </html>

obj01

 <!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 language="javascript" type="text/javascript">

         var person = { name: "wyp", age: 32 };

         person.sex = true;

         window.alert(person.name);

     </script>

 </head>

 <body>

 </body>

 </html>

obj02

 <!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 language="javascript" type="text/javascript">

         //var obj1 = { name: 'wyp' };

         //var obj2 = obj1;

         //window.alert(obj2.name);

         //obj1.name = "wangyunpeng";

         //window.alert(obj2.name);

         var obj = { name: "ddd" };

     </script>

 </head>

 <body>

 </body>

 </html>

obj03

 <!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 language="javascript" type="text/javascript">

         //var person = new Object();

         //person.name = 'wyp';

         //person.age = 33;

         //person.say = function () {

         //    window.alert(this.name);

         //}

         //person.say();

         var person = {

             name: "wyp",

             age: 33,

             say: function () {

                 window.alert(this.name);

             }

         }

         person.say();

     </script>

 </head>

 <body>

 </body>

 </html>

obj04

 <!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 language="javascript" type="text/javascript">

         var Person = function () {

         };

         var person = new Person();

         window.alert(person instanceof Person);

     </script>

 </head>

 <body>

 </body>

 </html>

obj05

 <!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 language="javascript" type="text/javascript">

         function Person(name ,age) {

             this.name = name;

             this.age = age;

             this.say = function () {

                 window.alert(this.name);

             }

         }

         var person1 = new Person("wyp", 33);

         var person2 = new Person("hg", 29);

         window.alert(person1.say == person2.say);//false

         person1.say = function () {

             window.alert(this.age);

         }

         person1.say();

         person2.say();

     </script>

 </head>

 <body>

 </body>

 </html>

obj06

 <!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 language="javascript" type="text/javascript">

         function Person() {

         }

         Person.prototype.name = "wyp";

         Person.prototype.age = 33;

         Person.prototype.say = function () {

             window.alert(this.name);

         }

         var person1 = new Person();

         var person2 = new Person();

         person2.name = "hg";

         person2.age = 29;

         person1.say();

         person2.say();

     </script>

 </head>

 <body>

 </body>

 </html>

obj07

 <!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 language="javascript" type="text/javascript">

         function Person() {

         }

         Person.prototype = {

             constructor: Person,

             name: "wyp",

             age: 33,

             works: ['gh', 'zyx'],

             say: function () {

                 window.alert(this.name + ",[" + this.works + "]");

             }

         };

         var person1 = new Person();

         person1.name = "wyp";

         person1.works.push("db");

         person1.say();

         var person2 = new Person();

         person2.name = "sl";

         person2.say();

     </script>

 </head>

 <body>

 </body>

 </html>

obj08

 <!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 language="javascript" type="text/javascript">

         function Person(name, age, works) {

             this.name = name;

             this.age = age;

             this.works = works;

             if (!Person.prototype.say) {

                 Person.prototype.say = function () {

                     window.alert(this.name + ",[" + this.works + "]");

                 }

             }

         }

         var person1 = new Person("wyp", 33, ['hg', 'zyx']);

         person1.works.push('db');

         //person1.say = function () {

         //    window.alert(this.age);

         //};

         var person2 = new Person("gh", 29, ['hg', 'zyx']);

         person1.say();

         person2.say();

         window.alert(person1.say == person2.say);

     </script>

 </head>

 <body>

 </body>

 </html>

obj09

 <!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 language="javascript" type="text/javascript">

         //function Person(name, age) {

         //    this.name = name;

         //    this.age = age;

         //    this.say = say;

         //}

         function Person() {

         }

         Person.prototype.name = "name";

         Person.prototype.age = 33;

         Person.prototype.say = function () {

             window.alert(this.name);

         }

         function say() {

             window.alert(this.name);

         }

         var person1 = new Person("wyp", 33);

         person1.name = "wyp";

         person1.say = function () {

             window.alert(this.age);

         }

         var person2 = new Person("gh", 29);

         window.alert("person1.say == person2.say:" + (person1.say == person2.say));

         window.alert("prototype.isPrototypeOf:" + Person.prototype.isPrototypeOf(person1));

         window.alert("constructor:" + (person1.constructor == Person));

         window.alert("name:" + person1.hasOwnProperty("name"));

         //delete person1.name;

         //window.alert("name:" + person1.hasOwnProperty("name"));

         window.alert(" [in] " + ("name" in person1));

         function isPrototypeProperty(obj,prop) {

             return (!(obj.hasOwnProperty(prop)) && (prop in obj));

         }

     </script>

 </head>

 <body>

 </body>

 </html>

obj10

 <!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 language="javascript" type="text/javascript">

         ( function (num) {

             for (var i = 0; i < num; i++) {

             }

         } )(20);

         window.alert(i);

     </script>

 </head>

 <body>

 </body>

 </html>

close01

 <!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 language="javascript" type="text/javascript">

         function Parent() {

             this.pv = "parent";

         }

         Parent.prototype.showParent = function () {

             window.alert(this.pv);

         }

         function Child() {

             this.cv = "child";

         }

         Child.prototype = new Parent();

         Child.prototype.showChild = function () {

             window.alert(this.cv);

         }

         var child= new Child();

         //window.alert(child.pv);

         child.showParent();

         child.showChild();

     </script>

 </head>

 <body>

 </body>

 </html>

jicheng01

 <!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 language="javascript" type="text/javascript">

         function Parent(name) {

             this.color = ['red', 'blue'];

             this.name = name;

             this.say = say;

         }

         function say() {

             window.alert(this.name);

         }

         function Child(name, age) {

             this.age = age;

             Parent.call(this, name);

         }

         var child1 = new Child("wyp", 33);

         //child1.color.push("yellow");

         //window.alert(child1.color);

         //window.alert(child1.name);

         //window.alert(child1.age);

         var child2 = new Child("meinv", 23);

         //window.alert(child1.name + "," + child1.age);

         //window.alert(child2.name + "," + child2.age);

         child1.say = function () {

             window.alert(child1.age);

         }

         child1.say();

         child2.say();

     </script>

 </head>

 <body>

 </body>

 </html>

jicheng02

 <!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 language="javascript" type="text/javascript">

         function Parent(name) {

             this.name = name;

             if(!Parent.prototype.say){

                 Parent.prototype.say = function () {

                     window.alert(this.name);

                 };

             }

         }

         //Parent.prototype = {};

         function Child(name, age) {

             this.age = age;

             Parent.call(this, name);

         }

         Child.prototype = new Parent();

         //重写父类say方法

         //Child.prototype.say = function () {

         //    window.alert(this.name + "," + this.age);

         //};

         var child1 = new Child("wyp", 33);

         child1.say();

     </script>

 </head>

 <body>

 </body>

 </html>

jicheng03

上一篇：[BZOJ 5055]膜法师


下一篇：【机器学习】--线性回归中soft-max从初始到应用