zoukankan      html  css  js  c++  java

  • 012 原型

    一：原型

    1.说明

    　　共享数据，可以减少空间的使用

    2.程序

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <input type="button" value="显示效果" id="btn"/>
11     <div id="dv"></div>
12     <script>
13         function ChangeStyle(btnObj, dvObj, json){
14             this.btnObj=btnObj;
15             this.dvObj=dvObj;
16             this.json=json;
17         }
18         ChangeStyle.prototype.init=function(){
19             var that=this;
20             this.btnObj.onclick=function(){
21                 for(var key in that.json){
22                     that.dvObj.style[key]=that.json[key];
23                 }
24             };
25         };
26         var json={"width":"300px","height":"200px","backgroundColor":"blue","opacity":"0.2"};
27         var cs=new ChangeStyle(document.getElementById("btn"),document.getElementById("dv"),json);
28         cs.init();
29     </script>
30 </body>
31 </html>

    　　效果：

    　　

    3.简单的原型语法

    　　注意在语法中，要写constructor:构造函数

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         function Student(name,age,sex){
12             this.name=name;
13             this.age=age;
14             this.sex=sex;
15         }    
16         Student.prototype={
17             constructor: Student,
18             height: "189",
19             study: function(){
20                 console.log("study function");
21             }
22         };
23         var stu=new Student("tom",20,"M");
24         stu.study();
25     
26     </script>
27 </body>
28 </html>

    4.原型内的函数可以互相调用

    　　在其中，需要使用this进行调用，不然将会报错

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         function Student(name,age,sex){
12             this.name=name;
13             this.age=age;
14             this.sex=sex;
15         }    
16         Student.prototype={
17             constructor: Student,
18             height: "189",
19             study: function(){
20                 console.log("study function");
21             },
22             eat: function(){
23                 console.log("eat function");
24                 this.study();
25             }
26 
27         };
28         var stu=new Student("tom",20,"M");
29         stu.eat();
30     
31     </script>
32 </body>
33 </html>

    　　效果：

    　　

    5.将局部变量变成全局变量

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         (function(win){
12             var num=10;
13             win.num=num;
14         })(window);
15         console.log(num);
16     </script>
17 </body>
18 </html>

    6.在原型中添加方法

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         (function(win){
12             function Random(){}
13             //给原型添加函数
14             Random.prototype.getRandom=function(){
15                 return Math.floor(Math.random()*5);
16             }
17             win.random=new Random();
18             var random=new Random();
19             var num = random.getRandom();
20             win.num=num;
21         })(window);
22         
23        console.log(num);
24 
25 
26     </script>
27 </body>
28 </html>

    二：原型链

    1.说明

    　　是一种关系，是实例对象和原型对象之间的关系

    　　关系是通过原型__proto__来联系的

    2.原型链可以改变

    　　实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象

    　　构造函数的原型对象protoytpe指向如果变了，实例对象的原型__proto__指向也会变化。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         function Person(name){
12             this.name=name;
13         }
14         Person.prototype.eat=function(){
15             console.log("person eat");
16         }
17          
18         function Student(){}
19         
20         Student.prototype=new Person(10);
21         var stu = new Student();
22         stu.eat();
23 
24     </script>
25 </body>
26 </html>

    　　效果：

    　　

    3.改变原型对象中属性的值

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         function Person(name){
12             this.name=name;
13         }
14         Person.prototype.age=10;
15 
16         Person.prototype.age=20;
17 
18         var person = new Person("tom");
19         console.log(person.age);
20 
21     </script>
22 </body>
23 </html>

    　　效果：

    　　

    三：继承

    1.程序

    ·　　使用原型进行继承，因为这些方法可以共享。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11          //例子:
12     //人,都有姓名,性别,年龄, 吃饭, 睡觉, 玩
13     //学生,都有姓名,性别,年龄, 成绩, 吃饭, 睡觉, 玩 ,学习的行为
14 
15 
16     //js中通过原型来实现继承
17 
18     function Person(name,age,sex) {
19       this.name=name;
20       this.sex=sex;
21       this.age=age;
22     }
23     Person.prototype.eat=function () {
24       console.log("人可以吃东西");
25     };
26     Person.prototype.sleep=function () {
27       console.log("人在睡觉");
28     };
29     Person.prototype.play=function () {
30       console.log("生活就是不一样的玩法而已");
31     };
32 
33 
34     function Student(score) {
35       this.score=score;
36     }
37     //改变学生的原型的指向即可==========>学生和人已经发生关系
38     Student.prototype=new Person("小明",10,"男");
39     Student.prototype.study=function () {
40       console.log("学习很累很累的哦.");
41     };
42 
43     //相同的代码太多,造成了代码的冗余(重复的代码)
44 
45     var stu=new Student(100);
46     console.log(stu.name);
47     console.log(stu.age);
48     console.log(stu.sex);
49     stu.eat();
50     stu.play();
51     stu.sleep();
52     console.log("下面的是学生对象中自己有的");
53     console.log(stu.score);
54     stu.study();
55     </script>
56 </body>
57 </html>

    　　效果：

    　　

    2.构造函数继承

    　　上面的缺陷：因为直接初始化了属性。

    　　做法：只能调用对象.属性=xxx，进行重新复制。这种做法特别不好。

    　　解决方案：使用构造函数继承，但是，这种方式不能继承函数。

    3.组合继承

    　　原型继承+借用构造函数继承

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>title</title>
 6   <script>
 7 
 8 
 9     //原型实现继承
10     //借用构造函数实现继承
11     //组合继承:原型继承+借用构造函数继承
12 
13     function Person(name,age,sex) {
14       this.name=name;
15       this.age=age;
16       this.sex=sex;
17     }
18     Person.prototype.sayHi=function () {
19       console.log("阿涅哈斯诶呦");
20     };
21     function Student(name,age,sex,score) {
22       //借用构造函数:属性值重复的问题
23       Person.call(this,name,age,sex);
24       this.score=score;
25     }
26     //改变原型指向----继承
27     Student.prototype=new Person();//不传值
28     Student.prototype.eat=function () {
29       console.log("吃东西");
30     };
31     var stu=new Student("小黑",20,"男","100分");
32     console.log(stu.name,stu.age,stu.sex,stu.score);
33     stu.sayHi();
34     stu.eat();
35 
36   </script>
37 </head>
38 <body>
39 
40 
41 </body>
42 </html>

    　　效果：

    　　

    4.拷贝继承

    　　基本的属性与函数都会被拷贝过来

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11          function Person() {
12         }
13         Person.prototype.age=10;
14         Person.prototype.sex="男";
15         Person.prototype.height=100;
16         Person.prototype.play=function () {
17             console.log("玩的好开心");
18         };
19 
20         var obj2={};
21 
22         //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法
23         for(var key in Person.prototype){
24             obj2[key]=Person.prototype[key];
25         }
26         console.dir(obj2);
27         obj2.play();
28     </script>
29 </body>
30 </html>

    　　效果：

    　　

    四：this指向

    　　* 普通函数中的this是谁?-----window
    　　* 对象.方法中的this是谁?----当前的实例对象
    　　* 定时器方法中的this是谁?----window
    　　* 构造函数中的this是谁?-----实例对象
    　　* 原型对象方法中的this是谁?---实例对象
  • 相关阅读:
    .NET基础知识-类型、方法与继承
    .NET基础知识-string、StringBuilder、字符串操作
    .NET基础知识-装箱与拆箱
    .NET基础知识-值类型与引用类型
    Python之多进程、多线程、协程、同步/异步、并发/并行
    设计模式之工厂模式
    设计模式之单例模式
    python模块之logging
    python模块之hashlib
    python模块之pickle&json&shelve
  • 原文地址：https://www.cnblogs.com/juncaoit/p/11333429.html
Copyright © 2011-2022 走看看