JavaScript对象及初识面向对象

对象是什么?
对象是包含相关属性和方法的集合体
属性
方法
什么是面向对象
面向对象仅仅是一个概念或者编程思想
通过一种叫做原型的方式来实现面向对象编程


创建对象
自定义对象
内置对象
 

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

语法:

var 对象名称=new Object( );

示例:----------通过  . 添加属性和方法

var flower=new Object();

    flower.name="长春花";

    flower.genera="夹竹桃科 长春花属";

    flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

    flower.uses="观赏或用药等";

    flower.showName=function(){    alert(this.name);    }

 flower.showName();
 

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

示例:

var flower={

        name:"长春花",

        genera:"夹竹桃科 长春花属",

        area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",

        uses:"观赏或用药等",

        showName:function(){ alert(this.name); }

    }

 flower.showName();
 

内置对象2-1
常见的内置对象:

String(字符串)对象

Date(日期)对象

Array(数组)对象

Boolean(逻辑)对象

Math(算数)对象

RegExp对象


构造函数和原型对象
如何解决使用同一个接口不需要创建很多对象,减少产生大量的重复代码?

构造函数

原型对象

构造函数


创建构造函数
示例:

function Flower(name,genera,area,uses){

        this.name=name;

       …….

        this.showName=function(){

            alert(this.name);

        }

    }
    var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")

   flower1.showName();

使用构造函数创建对象
示例:

var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");

flower2.showName();

var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");

flower3.showName();

使用构造函数创建新实例
调用构函数的4个步骤:

创建一个新对象

将构造函数的作用域赋给新对象(this就指向了这个新对象)

执行构造函数中的代码

返回新对象

constructor属性
constructor属性指向Flower

示例:

alert (flower1.constructor==Flower);

alert (flower2.constructor==Flower);

alert (flower3.constructor==Flower);

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

alert(flower1 instanceof Object);

alert(flower1 instanceof Flower);

alert(flower2 instanceof Object);

alert(flower2 instanceof Flower);

alert(flower3 instanceof Object);

alert(flower3 instanceof Flower);
 

原型对象2-1
示例:

function Flower(){



    }

    Flower.prototype.name="曼陀罗花";

    Flower.prototype.genera="茄科 曼陀罗属";

    Flower.prototype.area="印度、中国北部";

    Flower.prototype.uses="观赏或药用";

    Flower.prototype.showName=function() {

        alert(this.name);

    }

    var flower1=new Flower();

    flower1.showName();

    var flower2=new Flower();

    flower2.showName();

    alert(flower1.showName==flower2.showName);
 

原型对象2-2
示例:

function Flower(){

    }

    Flower.prototype.name="曼陀罗花";

    Flower.prototype.genera="茄科 曼陀罗属";

    Flower.prototype.area="印度、中国北部";

    Flower.prototype.uses="观赏或药用";

    Flower.prototype.showName=function() {

        alert(this.name);

    }

    var flower1=new Flower();

    var flower2=new Flower();

    flower1.name="长春花";

    alert(flower1.name);

    alert(flower2.name);
 

继承
原型链
对象继承
 

原型链4-1
一个原型对象是另一个原型对象的实例
相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链


原型链4-2
示例:

function Humans(){

        this.foot=2;

    }

    Humans.prototype.getFoot=function(){

       return this.foot;

    }

    function Man(){

        this.head=1;

    }

    Man.prototype=new Humans();          //继承了Humans

    Man.prototype.getHead=function(){

        return this.head;

    }

    var man1=new Man();

    alert(man1.getFoot());                          //2

    alert(man1 instanceof Object);          //true     

    alert(man1 instanceof Humans);        //true

    alert(man1 instanceof Man);          //true
 

原型链4-3
构造函数和原型之间的关系

原型链4-4
调用man1.getFoot( ) 经历的三个步骤:

搜索实例

搜索Man.prototype

搜索Humans.prototype

完整的原型链
Object在原型链中的位置

对象继承
man1.clothing和man2.clothing输入的信息一样,为什么?
创建子类型的实例时,不能向父类型的构造函数中传递参数


示例:

 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);
 

借用构造函数2-1
语法:

apply([thisOjb[,argArray]])

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

语法:

call([thisObj[,arg1[,arg2[,  [,argN]]]]])

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

借用构造函数2-2
示例:  

function Humans(name){

        this.name=name;

    }

    function Man(){

        Humans.call(this,"mary");   //继承了Humans,同时还传递了参数

        this.age=38;              //实例属性

    }

    var man1=new Man();

    alert(man1.name);       //输出mary

    alert(man1.age);        //输出38
 

组合继承
组合继承:有时也叫做伪经典继承

将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

原文地址:https://www.cnblogs.com/wws553/p/11004836.html