• JavaScript面向对象


    1.创建对象

         1.1、字面量

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 
     9   <script>
    10       var flower={
    11         name:"末端",
    12           area:"地址",
    13            showName:function () {
    14                alert(this.name);
    15            }
    16       }
    17 
    18       flower.showName();
    19   </script>
    20 </body>
    21 </html>
    View Code

    1.2、new Object

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <script>
     9     var flower = new Object();
    10 
    11     flower.name = "ab";
    12     flower.genera = "切克";
    13     flower.area = "一点";
    14     flower.showName = function () {
    15         alert(this.name);
    16     }
    17 
    18     flower.showName();
    19 
    20 </script>
    21 
    22 </body>
    23 </html>
    View Code

    1.3构造函数

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <script>
     9     function Flower(name,age) {
    10         this.name=name;
    11         this.age =age;
    12         this.showName=myShow;
    13     }
    14     
    15     function myShow() {
    16             alert(this.name);
    17     }
    18 
    19     var f1=new Flower("牡丹花",100);
    20     f1.showName();
    21 
    22 </script>
    23 </body>
    24 </html>
    View Code

    2.继承

          2.1原型链

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <script>
     9     function Humens() {
    10         this.foot = 2;
    11     }
    12 
    13     Humens.prototype.getFoot = function () {
    14         return this.foot;
    15     }
    16     function Man() {
    17         this.head = 1;
    18     }
    19 
    20     Man.prototype = new Humens();
    21 
    22     Man.prototype.getHead = function () {
    23         return this.head;
    24     }
    25     var man1 = new Man();
    26     alert(man1.foot)
    27 
    28 
    29 </script>
    30 
    31 </body>
    32 </html>
    View Code

            2.2原型对象

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <script>
     9     function Flower() {
    10     }
    11 
    12     Flower.prototype.name = "ab";
    13     Flower.prototype.genera = "切克";
    14     Flower.prototype.area = "一点";
    15     Flower.prototype.showName = function () {
    16         alert(this.name);
    17     }
    18 
    19     var flower1 = new Flower();
    20     flower1.showName();
    21 
    22     var flower2 = new Flower();
    23     flower2.showName();
    24     alert(flower1.showName == flower2.showName)
    25 
    26     if (Flower.prototype == flower1.__proto__) {
    27         alert("===================");
    28     }
    29 
    30 </script>
    31 </body>
    32 </html>
    View Code

           2.3共享变量问题

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8       <script>
     9           function Humens() {
    10               this.sport=["s","b","t","k"];
    11           }
    12           function Man() {
    13               //call和apply都是解决共享变量的问题
    14              // Humens.call(this);
    15               Humens.apply(this)
    16 
    17           }
    18           Man.prototype=new Humens();
    19           var man1=new Man();
    20           man1.sport.push("aaaaaaaaaa");
    21           alert(man1.sport);
    22 
    23           var man2=new Man();
    24           alert(man2.sport);
    25 
    26       </script>
    27 </body>
    28 </html>
    View Code

           

  • 相关阅读:
    Android内存管理之道
    What a C programmer should know about memory
    Android Bitmap缓存池使用详解
    android 5.0主题风格研究
    最受欢迎的5个Android ORM框架
    目前具体实现 material design 有什么途径?
    计算机的数学要求(?转)
    机器智能公司一览图 | 36氪
    Android中Context
    从源码的角度深入分析Scroller
  • 原文地址:https://www.cnblogs.com/quliang/p/7060964.html
Copyright © 2020-2023  润新知