首页 > 编程语言 > 详细

javascript对象及初识面向对象

时间:2020-06-22 17:40:34      阅读:63      评论:0      收藏:0      [点我收藏+]

对象是什么?

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

---属性

---方法

什么是面向对象

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

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

 

创建对象

1.自定义对象

自定义对象2-1             基于Object对象创建对象

语法:var 对象名称 new Object();         

实例:

<script>
    //创建对象
    var flower=new Object();
    //创建一个属性
    flower.name="中国魂";
    flower.genera="中国武术";
    flower.area="中国美食";
    flower.uses="中国文化";
    //创建一个方法
    flower.showNane=function () {
        //调用了一个属性
        alert(this.name);
        alert(this.genera);
    };
    //调用方法
    flower.showNane();
</script>

 

  自定义对象2-2      使用字面量赋值方式创建对象

实例:

var person={
        name:"小明",
        sex:"男",
        age:18,
        hobby:"看书、看电影、健身、购物等",
        showName:function(){    alert(this.name);        }
}  
person.showName();

 

2.内置对象

---String对象   :length属性     indexOf( )方法、replace( )方法

 

 ---Date对象     :get×××:获取年、月、日、时、分、秒等等

                           set×××:设置年、月、日、时、分、秒等等

 ---Array对象   :length属性                 sort( )、concat( )、join( )方法

---Boolean对象    :true或者false               toString( )方法

---Math算数对象 :round( )、max( )、min( )方法

 ---RegExp对象:RegExp是正则表达式的缩写

 

构造函数和原型对象

意义:减少重复代码

构造函数

步骤:1.创建一个新对象

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

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

           4.返回新对象

实例:

function Person(name,sex,age,hobby){
        this.name=name;
       …….
        this.showName=function(){
            alert(this.name);
        }
}
var person1=new Person ("小明","男",18,"看书、看电影、健身、购物等")
person1.showName();

 

constructor属性

constructor属性指向Person

实例:alert(person1.constructor==Person);            显示结果为true或fase

 

instanceof操作符

使用instanceof操作符检测对象类型

实例:alert(person1 instanceof Object);

原型对象

 

 

继承:原型链

          对象继承

原型链定义:一个对象是另一个原型对象的实例

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

实例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>原型链</title>
 6 </head>
 7 <body>
 8 <script>
 9     //定义人类构造函数
10     function Humans() {
11         this.foot=2;
12     }
13     Humans.prototype.getFoot=function () {
14         return this.foot;
15     }
16     function Man() {
17         this.head=1;
18     }
19     Man.prototype=new Humans();
20    
21     Man.prototype.getHead=function () {
22         return this.head;
23     }
24     Man.prototype.getFoot=function () {//重写父类的方法
25         return 999;
26     }
27     var man1=new Man();
28     alert(man1.getFoot());
29     alert(man1.getHead());
30     alert(man1 instanceof Object);
31     alert(man1 instanceof Humans);
32     alert(man1 instanceof Man);
33 </script>
34 
35 </body>
36 </html>

 

对象继承实例: 

  

 function Humans(){
        this.clothing=["trousers","dress","jacket"];
}
function Man(){     }
//继承了Humans
Man.prototype=new Humans();
var man1=new Man();
man1.clothing.push("coat");
alert(man1.clothing);
var man2=new Man();
alert(man2.clothing);

 

 

 

 对象继承:借用构造函数

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

语法:apply([thisObj [,argArray]])

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

语法:call([thisObj[,arg1[,arg2[, [,argN]]]]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借用构造函数</title>
</head>
<body>
<script>
    function Humans() {
        this.clothing=["trousers","dress","jacket"];
    }
    function Man() {
        Humans.call(this);//继承Humans
        //调用一个对象的一个方法一另一个对象替换当前对象
    }
    var man1=new Man();
    man1.clothing.push("coat");
    alert(man1.clothing);
    var man2=new Man();
    alert(man2.clothing);
</script>
</body>
</html>

 

组合继承:

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合</title>
</head>
<body>
<script>
    function Humans(name) {
        this.name=name;
        this.clothing=["trousers","dress","jacket"];
    }
    Humans.prototype.sayName=function () {
        alert(this.name);

    }
    function Man(name,age) {
        Humans.call(this.name);
        this.age=age;
    }
    Man.prototype=new Humans();
    Man.prototype.sayAge=function () {
        alert(this.age);
    }
    var man1=new Man("mary",34);
    man1.clothing.push("coat");
    alert(man1.clothing);

    man1.sayName();
     man1.sayAge();
    var man2=new Man("tom",234);
    alert(man2.clothing);
    man2.sayName();
    man2.sayAge();
</script>
</body>
</html>

javascript对象及初识面向对象

原文:https://www.cnblogs.com/xiaohanzong/p/13177419.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!