zoukankan      html  css  js  c++  java
  • js.面向对象

    一.什么是面向对象?

    面向对象:一种编程思想,在程序里面用对象来描述现实中一个具体的事务

    对象:封装了一个事务的属性和功能的程序结构

    why oop:和现实中人的想法非常接近,便于大程序的维护

    面向对象的三大特点:

    封装,继承,多态

    封装(创建自定义对象)

    创建自定义对象有三种方法:

    1、使用对象的直接量 

    var obj = {

    属性名:属性值,

    ...:...,

    方法名:function(){

    ..

    this.属性名...

    this.方法名()..

    },

    ...:...,

    }

    这里有有一个关键字this

    对象自己的方法,要访问自己的属性,必须用this.属性名!!!!!!!

    this 就是引用正在调用函数对象的关键词,就是点(.)前面的对象

    why:方法中不加this的变量,默认仅在作用域链中找,不会去对象中查找

    when:只要对象的方法想要用自己的属性,必须加this

    2.使用new方法创建:( 在创建对象时候,暂时不知道对象的成员 )

    var obj = new Object();//创建一个空对象 ,可以简写为  new Object 或Object()

    向空对象中添加属性和方法:

        obj.属性名= 属性值

       obj.方法名=function(){...this.属性名...}

    对象本质:js中的一切对象的底层都是关联数组

    每个属性/方法 都是关联数组中的元素value

    每个方法名/属性名,都是关联数组中的key

    3、构造函数

     什么是构造函数:专门用来描述一类对象统一结构的函数 ---共有的属性或方法

     何时用构造函数:反复创建多个相同结构的对象时,都要先定义统一的构造函数,在使用构造函数反复创建对象

    1>定义构造函数时

     类型名的首字母大写

    function 类型名(属性参数列表){

    this.属性名 = 属性参数值;

    ....;

    this.方法名 = function(){

    ...this.属性名....

    }

    }

    new方法四个步骤

    1.创建新的空对象

    2.用new创建对象时,会自己默认子对象的_proto_来继承 (父对象)构造函数的prototype属性

    3.用新对象去调用构造函数

     new的功能将构造函数中的this指新对象

     向新对象中添加构造函数规定的属性

     将属性参数的值,保存到新对象的新属性中

     向新对象添加构造 函数规定的方法

    4.将新对象的地址保存在变量

    继承

    继承:父对象的成员,子对象不用重复创建,也可以直接使用 这样就可以节约内存,代码重复使用,提高效率

     什么时候用呢?

     只要一类子对象,都需要相同的苏醒或功能时,都要将相同的属性和功能仅在父对象中定义一次即可。

     怎么用呢?

     js中的继承都是继承原型对象

     原型对象:专门集中存储一类子对象相同属性和功能的父对象 同一类子对象所共有的属性或方法

     怎么定义?

     每创建一个构造函数,都会自动赠送一个原型对象

     prototype 是构造函数的一个属性

    如果修改原型对象中的方法或属性会怎样? 

    不会去修改原型对象中的属性值,而是在子对象中自己添加一个新的属性

    如何区分自有属性和共有属性?

     自有属性:直接保存在对象本地的属性

    共有属性:保存在原型对象中,被所有子对象共享的属性使用方式都是 创建的类型名.属性/方法

     赋值:

     自有属性:对象名.属性 = 值

     共有属性: 构造函数.prototype.属性名 = 值

     鉴别自有 var bool = obj.hasOwnProperty("属性名") 判断属性名是否是obj的自有属性

     true:自有属性

     false:不是自有属性 共有属性,一种不存在的属性

    内置对象的继承关系

    1、凡是可以new的类型,都是构造函数

    2、每个内置对象的构造函数都对应一个内置的原型对象

    3、内置类型的原型对象保存了该类型各种的共子对象使用的API 且这些是共有的

    多态

     多态实际上是不同对象作用与同一操作产生不同的效果。多态的思想实际上是把“想做什么”和“谁去做“分开

     多态开发在开发组件和模块化开发的时候能节省很多资源。

    原型链

    原型本身也是个对象,因此原型对象也有原型 对象就有__proto__

    由多级父元素逐级继承形成的链式结构

    原型链保存着:所有对象的成员(方法和属性)

    作用域链保存:所有的变量

    原型链作用:控制对象访问成员的使用顺序:优先使用自己的,自己没有,才延着原型链向父级查找

    作用域链作用:控制变量的使用顺序(优先使用活动对象(AO)中的局部变量,局部中没有,才去延用作用域链向父级作用域查找)

    原型链最顶端:Object.prototype

    作用域链的终点:window

    简单概况:

    所有不需要"对象."访问的变量都保存在作用域链中

    所有需要用"对象."访问的变量都保存在原型链中

    关于面向对象编程练习题

    1.货车和小轿车有一些共同的特性,都有车牌号,生产厂家,颜色,并且都有行驶的功能,但是货车行驶的时候速度一般80公里/小时,

    而小轿车行驶的速度一般在160公里/小时,除此之外货车还有载货的功能,小轿车有载人的功能,货车在行驶的时候,需要输出行驶的速度外,

    还要输出司机姓名和驾龄这两个信息,司机的信息由调用该方法的时候作为参数传递过去。

    <script type="text/javascript">
    // 1、定义父类型
    // 父类型的构造函数,集中定义相同的属性结构
    function Runer(card,manu,color,sname,dyears,speed){
    this.card = card;
    this.manu = manu;
    this.color = color;
    this.sname = sname;
    this.dyears = dyears;
    this.speed = speed;
    }
    Runer.prototype.run = function(){
    console.log("车牌号:"+this.card+",生产厂家:"+this.manu+",颜色为:"+this.color+",行驶速度一般"+this.speed+",司机姓名:"+this.sname+"驾龄:"+this.dyears);
    }
    //2.让子类型原型对象继承父类型原型对象
    //3.在子类构造函数中借用父类型构造函数 达到请父类型构造函数帮忙初始化属性结构
    // 货车
    function Truck(card,manu,color,sname,dyears,speed){
    // 问题:直接调用父类型构造函数,其中的this默认是window
    // 解决:call 只要是this不是想要,就可以用call随便替换 父类型构造函数.call(this,参数...)
    Runer.call(this,card,manu,color,sname,dyears,speed);
    }
    // 让Truck的型原型对象继承Runer的原型对象
    Object.setPrototypeOf(Truck.prototype,Runer.prototype);
    // Truck.prototype.run = function(){
    // console.log("车牌号:"+this.card+",生产厂家:"+this.manu+",颜色为:"+this.color+",行驶速度一般"+this.speed+",司机姓名:"+this.sname+"驾龄:"+this.dyears);
    // }
    Truck.prototype.carry = function(){
    console.log("货车有载货的功能");
    }
    function Car(card,manu,color,sname,dyears,speed){
    Runer.call(this,card,manu,color,sname,dyears,speed);
    }
    // 让Car的型原型对象继承Runer的原型对象
    Object.setPrototypeOf(Car.prototype,Runer.prototype);
    // Car.prototype.run = function(){
    // console.log("车牌号:"+this.card+",生产厂家:"+this.manu+",颜色为:"+this.color+",行驶速度一般"+this.speed+",司机姓名:"+this.sname+"驾龄:"+this.dyears);
    // }
    Car.prototype.manned = function(){
    console.log("小轿车有载人的功能");
    }
    var truck = new Truck("鄂888888","东风风神","蓝色","李白","10年","80km/s");
    truck.run();
    truck.carry();
    var car = new Car("鄂666666","BMW","白色","韩信","5年","160km/s");
    car.run();
    car.manned();
    </script>

    2.冰箱和电视机都属于电器,都有工作的方法,颜色,重量和品牌,但是冰箱和电视机的工作方式不一样,冰箱的工作是制冷,

    电视机的工作是成像,电视机又有录制的功能,有声音/频道属性,电视机可以分为普通电视机和液晶电视机,

    其工作时的成像技术不一样,冰箱又有定时的功能,还有风速和温度的属性。

    <script type="text/javascript">
    function Elect(color,weight,brand){
    this.color = color;
    this.weight = weight;
    this.brand = brand;
    }
    Elect.prototype.attr = function(){
    console.log("颜色是"+this.color+"重量是:"+this.weight+"品牌是:"+this.brand);
    }

    function Regor(way,color,weight,brand,volume,channel){
    Elect.call(this,color,weight,brand);
    this.way = way ;
    this.volume = volume;
    this.channel = channel;
    }
    Object.setPrototypeOf(Regor.prototype,Elect.prototype);
    Regor.prototype.trans = function(){
    console.log("电视的工作是"+this.way+"电视机有录制的功能"+"声音:"+this.volume+"频道:"+this.channel);
    }
    function Refrig(way,color,weight,brand,windspeed,temperature){
    Elect.call(this,color,weight,brand);
    this.way = way;
    this.windspeed = windspeed;
    this.temperature = temperature;
    }
    Object.setPrototypeOf(Refrig.prototype,Elect.prototype);
    Refrig.prototype.timing = function(){
    console.log("冰箱工作是"+this.way+"冰箱有定时功能"+"风速:"+this.windspeed+"温度:"+this.temperature);
    }
    var regor = new Regor("成像","黑色","20kg","长虹","3D环绕","85hz");
    regor.attr();
    regor.trans();
    var refrig = new Refrig("制冷","白色","60kg","海尔","高风","20℃");
    refrig.attr();
    refrig.timing();
    </script>

    3.有狮子、斑马、鲨鱼、海豚四类动物,他们都有年龄、体重这些信息,并且繁殖后代的方式都是胎生,

    但是生活方式却有所不同,狮子和斑马在陆地上生活,属于陆生动物,并且他们的扑食方式又不同,

    狮子靠捕捉其他小动物为生,而斑马靠食草为生,鲨鱼和海豚在水下生活,属于水生动物。

    请在确保代码的扩展性和较少冗余的情况下构造函数和原型。

    <script type="text/javascript">
    function Animal(name,age,weight,breed){
    this.name = name;
    this.age = age;
    this.weight = weight;
    this.breed = breed;
    }
    Animal.prototype.attr = function(){
    console.log(this.name+",年龄:"+this.age+",体重:"+this.weight+",繁衍后代方式:"+this.breed);
    }
    function Lion(name,age,weight,breed,life,eat){
    Animal.call(this,name,age,weight,breed);
    this.life = life;
    this.eat = eat;
    }
    Object.setPrototypeOf(Lion.prototype,Animal.prototype);
    Lion.prototype.live = function(){
    console.log("生活方式:"+this.life+",扑食方式:"+this.eat);
    }
    function Zebra(name,age,weight,breed,life,eat){
    Animal.call(this,name,age,weight,breed);
    this.life = life;
    this.eat = eat;
    }
    Object.setPrototypeOf(Zebra.prototype,Animal.prototype);
    Zebra.prototype.live = function(){
    console.log("生活方式:"+this.life+",扑食方式:"+this.eat);
    }
    var lion = new Lion("狮子","5岁","50kg","胎生","陆生动物","肉食动物");
    lion.attr();
    lion.live();
    var zebra = new Zebra("斑马","3岁","50kg","胎生","陆生动物","食草动物");
    zebra.attr();
    zebra.live();
    </script>

  • 相关阅读:
    Thinkphp学习笔记2-
    Thinkphp学习笔记1-URL模式
    WebApi-如何实现接口加密
    微信-.NET调用JS-SDK
    微信-JSSDK .NET版
    HTML-获取/修改html页面标题
    JS-获取图片地址
    微信-js sdk invalid signature签名错误 问题解决
    C++笔试题
    单链表反转的分析及实现
  • 原文地址:https://www.cnblogs.com/hyh888/p/11331582.html
Copyright © 2011-2022 走看看