zoukankan      html  css  js  c++  java
  • 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对象

    学员操作—创建person对象2-2
    练习:

    实现思路

    使用new创建对象person

        var person=new Object();

    使用“.”添加属性

       person.name="朗晓明";

        person.age="38";

    使用+把各属性的值拼接起来,使用innerHTML为页面元素赋值

       var str="姓名:"+this.name+"<br/>年龄:"+this.age+"……;

    简写:var str=this.name+this.age+……;

       document.getElementById("intro").innerHTML=str;

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

    构造函数

    原型对象

    构造函数


    创建构造函数
    示例:

    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
     

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

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

  • 相关阅读:
    服务器上传大小限制 --- 来自 FastAdmin 项目开发的引发的问题 (TODO)
    英语中的各种“破坏”
    PADS Layout CAM 的中高级焊盘选项
    FastAdmin 推荐 Git 在线学习教程
    Vue 将样式绑定到一个对象让模板更清晰
    jQuery动态的给页面中添加一条样式表的链接
    页面根据不同的情况添加不同的样式表
    jQuery屏蔽浏览器的滚动事件,定义自己的滚轮事件
    如何判断自己的浏览器支持的是javascript的那个版本
    ie下 iframe在页面中显示白色背景 如何去掉的问题
  • 原文地址:https://www.cnblogs.com/szhhhh/p/10998623.html
Copyright © 2011-2022 走看看