JavaScript面向对象

2021-05-08 10:29

阅读:532

标签: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


评论


亲,登录后才可以留言!