码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript面向对象

时间:2020-06-22 19:00:05      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:const   div   prot   啊啊啊   apply   span   his   head   包含   

       1.对象是什么

              对象是包含相关属性和方法的集合体

       2.什么是面向对象

              1.面向对象仅仅是一个概念或者编程思想

              2.通过一种叫做原型的方式来实现面向对象编程

       3.创建对象

              基于Object对象的方式创建对象

                     var  对象名称 = new Object();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script>
            var person = new Object();
            person.name = "小明";
            person.hobby = "范德萨、范德萨、";
            person.showName = function(){
                alert(this.hobby);
            }
            person.showName();
        </script>
    </body>
</html>

       4.使用字面量赋值方式创建对象

              

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>创建对象</title>
 6     </head>
 7     <body>
 8         <script>
 9             var person={
10                 name:"小明",
11                 sex:"",
12                 age:18,
13                 hobby:"呃呃、范德萨、 士大夫、但是、",
14                 showName:function(){
15                     alert(this.name);
16                 }
17             }
18             person.showName();
19         </script>
20     </body>
21 </html>

       5.如何解决使用同一个接口不需要创建很多对象,减少产生大量的重复代码?

              1.构造函数

                     function Person(){}   构造函数始终都应该首字母大写

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>构造函数</title>
 6     </head>
 7     <body>
 8         <script>
 9             function Person(name,sex,age,hobby){
10                 this.name = name;
11                 this.sex = sex;
12                 this.age = age;
13                 this.hobby = hobby;
14                 this.showName = function(){
15                     alert(this.name);
16                 }
17             }
18             var person1=new Person("小明","",18,"范德萨  大范式  啊啊啊");
19             person1.showName();
20             var person2=new Person("小的","",15,"范德萨 放到是  大范式  啊啊啊");
21             person2.showName();
22             
23             alert(person1.constructor);
24             alert(person1.constructor==Person);
25             
26             alert(person1 instanceof Object);
27             alert(person1 instanceof Person);
28             alert(person2 instanceof Person);
29         </script>
30     </body>
31 </html>

            调用构造函数的4个步骤

                            1.创建一个新对象

                            2.将构造函数的作用域赋给新对象(this)

                            3.执行构造函数中的代码

                            4.返回新对象

技术图片

                     使用 instanceof和constructor来检验对象类型

               2.原型对象

 

 1 <html>
 2     <head>
 3         <meta charset="utf-8" />
 4         <title>原型对象</title>
 5     </head>
 6     <body>
 7         <script>
 8             function Person(){
 9                 
10             }
11             Person.prototype.name ="小明";
12             Person.prototype.sex="";
13             Person.prototype.age=18;
14             Person.prototype.hobby="范德萨 现在才 微软";
15             Person.prototype.showName=function(){
16                 alert(this.name);
17             }
18             var person1 = new Person();
19             person1.showName();
20             var person2 = new Person();
21             var person3 = new Person();
22             person2.name = "呃呃";
23             alert(person2.name);
24             alert(person3.name);
25         </script>
26     </body>
27 </html>

 

 

              原型对象  也就是给每个属性一个初始值,使它没呀成为空值的情况

 

 

       6.继承

              1.原型链

                     一个原型对象是另一个原型对象的示例

                     相关的原型对象层层递进,就构成了示例与原型的链条,也就是原型链

 

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

 

 

 

 

              2.对象继承

                     

 1              Man.prototype=new Humans();
 2             Man.prototype.getHead=function(){
 3                 return this.head;
 4             }
 5             var man1 = new Man();
 6             alert(man1.getFoot());
 7             alert(man1.getHead());
 8             alert(man1 instanceof Object);
 9             alert(man1 instanceof Humans);
10             alert(man1 instanceof Man);

 

 

 

              3.借用构造函数

                     apply:应用某一个对象的一个方法,用另一个对象替换当前对象

                     call:调用一个对象的方法,以另一个对象替换当前对象

                    push:加入值

           

 1 <html>
 2     <head>
 3         <meta charset="utf-8" />
 4         <title></title>
 5     </head>
 6     <body>
 7         <script>
 8             function Humans(){
 9                 this.clothing=["范德萨","发短信","范德萨信息"];
10             }
11             function Man(){
12                 Humans.call(this);
13             }
14             var man1 = new Man();
15             man1.clothing.push("呃呃");
16             alert(man1.clothing);
17             var man2 = new Man();
18             alert(man2.clothing);
19         </script>
20     </body>
21 </html>

 

 

 

                          传递参数

    

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <script>
 9             function Humans(name,sex){
10                 this.name=name;
11                 this.sex=sex;
12             }
13             function Man(){
14                 Humans.call(this,"小明","");
15                 this.age=19;
16             }
17             var man1 = new Man();
18             alert(man1.name);
19             alert(man1.age);
20             alert(man1.sex);
21         </script>
22     </body>
23 </html>

 

                 组合继承

                           也叫做伪经典继承

                                    将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式

                                    使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <script>
 9             function Humans(name){
10                 this.name = name;
11                 this.clothing=["dsas","fds","sdfd"];
12             }
13             Humans.prototype.sayName = function(){
14                 alert(this.name);
15             }
16             function Man(name,age){
17                 Humans.call(this,name);
18                 this.age=age;
19             }
20             Man.prototype = new Humans();
21             Man.prototype.sayAge=function(){
22                 alert(this.age);
23             }
24             
25             var man1 = new Man("1314",19);
26             man1.clothing.push("fdsff");
27             alert(man1.clothing);
28             man1.sayName();
29             man1.sayAge();
30             var man2 = new Man("xzvx",19);
31             alert(man2.clothing);
32             man2.sayName();
33             man2.sayAge();
34         </script>
35     </body>
36 </html>

 

JavaScript面向对象

标签:const   div   prot   啊啊啊   apply   span   his   head   包含   

原文地址:https://www.cnblogs.com/yangshuwen/p/13178242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!