• 面向对象+闭包+三种对象的声明方式(字面式、new Object、构造函数、工厂模式、原型模式、混合模式)


    面向对象:

    对代码的一种抽象,对外统一提供调用接口的编程思想


    对象的属性:事物自身拥有的东西

    对象的方法:事物的功能

    对象:事物的一个实例

    对象的原型:.prototype -> 内存地址 -> 存储了一个对象

        function fn(){
            return 1;
        }
        alert(fn.prototype);//[object Object]

    通过new Function创建的对象是函数对象,其他的都是普通对象

    var obj=new Function(n1,n2,n3,...functionBody());
    //构造函数对象  前面是一系列参数,后面是自定义函数体
    //不过构造器构造的对象,效率比较低
    //参数顺序不能改变,必须一一对应
    
    var add=new Function("a","b","return a+b");
    var sum=add(3,5);
    alert(sum);//8

    闭包

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)

    全局变量在函数内部可以访问

    var n=100;
    function fn(){
        alert(n);//100
    }
    fn();

    函数内部的变量,在外部不能访问

    function fn(){
        var n=100;
    }
    fn();
    alert(n);//报错 n is not defined

    有时需要在外部访问函数内部的变量

    解决方法:在函数内部再定义一个函数,输出需要的变量,然后将该内部函数作为返回值

    function fn(){
        var n=100;
        function fn2(){
            alert(++n);
        }
        return fn2;
    }
    fn()();//101

    闭包:函数b在函数a内嵌套,函数a需要返回函数b

    用途:1、读取函数内部变量  2、让函数内部变量保留在内存中,不随着函数的执行结束而被销毁

    function fn(){
        var n=100;
        nAdd=function(){
            n++;
        }
        function fn2(){
            alert(n);
        }
        return fn2;
    }
    var res=fn();//将fn()赋值给变量后,内部变量不会在每次执行时被初始化
    res();//100
    nAdd();
    res();//101

    闭包的优缺点:

    优点-有利用封装,可以访问局部变量

    缺点-内存占用,容易产生内存泄漏

    闭包可以使用,但要谨慎使用


    在html中创建任意几个li,利用闭包特性实现点击li弹出它的索引值

    var lis=document.querySelectorAll("li");
    
    for(var i=0;i<lis.length;i++){
        (function(i){
            lis[i].onclick=function(){
                alert(i);
            }        
        })(i);
    }

    匿名函数自调用,传入了for循环里面的i值,保存每一次循环的i值

    for循环会先执行完毕,然后形成多个作用域

    每个i值会作为实参传入函数中,当点击li的时候,弹出的i值就是作用域中的i值

     字面式声明对象-最基本的方式

    //字面式
    var person={
        name:"cyy",
        age:25,
        eat:function(food){
            alert("我在吃"+food);
        }
    }
    console.log(person.name);//cyy
    person.eat("西瓜");//我在吃西瓜
    console.log(person instanceof Object);//true

    new Object() 构造函数

    Object是所有对象的基类,所有javascript对象都是由object延伸的

    //new Object()构造函数
    var person=new Object();
    person.name="cyy";
    person.age=25;
    person.infos=function(str){
        return this.name+" "+this.age+" "+str;//this指向当前对象
    }
    alert(person.infos("很可爱"));//cyy 25 很可爱

    构造方法声明对象

    使用new来实例化

    函数内部只能用this来访问属性和方法

    //构造方法声明对象
    function Person(name,age){
        this.name=name;//this.name是属性 name是参数
        this.age=age;
        this.show=function(){
            alert(this.name+" "+this.age);//this指向当前对象,不同的实例对象是独立的
        }
    }
    var cyy=new Person("cyy",25);
    cyy.show();//cyy 25
    
    var cyy2=new Person("cyy2",18);
    cyy2.show();//cyy2 18

    工厂方式声明对象:按照某种模式,可以不断的创造对象

    在一个函数内部使用 new Object() 创建一个对象,并且返回这个对象

    //工厂模式
    function person(name,age){
        var obj=new Object();
        obj.name=name;
        obj.age=age;
        obj.infos=function(){
            return this.name+" "+this.age+" 很可爱";//对象的方法中要调用属性,必须使用this
        }
        return obj;
    }
    var cyy=person("cyy",25);
    alert(cyy.infos());//cyy 25 很可爱
    
    var cyy2=person("cyy2",25);
    alert(cyy2.infos());//cyy2 25 很可爱
    
    // cyy和cyy2两者没有联系

    构造方式和工厂模式的区别:

    构造方式不会创建出一个对象,也不会返回这个对象,将属性赋值给this


    原型模式声明对象

    任何js方法或者函数,都自带prototype属性,并且以对象方式存在

    函数本身声明为空内容,通过prototype声明属性和方法,最后new这个函数

    //原型模式
    function person(){
    
    }
    //alert(person.prototype);//[object Object]
    person.prototype.name="cyy";
    person.prototype.age=25;
    person.prototype.infos=function(){
        return this.name+" "+this.age;
    }
    
    var p=new person();
    alert(p.infos());//cyy 25

    原型模式也可以以json数据的方式来定义属性和方法

    //原型模式
    function person(){
    
    }
    
    //json数据格式
    person.prototype={
        name:"cyy",
        age:25,
        infos:function(){
            alert(this.name+" "+this.age);
        }
    }
    
    var p=new person();
    p.infos();//cyy 25

    混合模式:构造模式+原型模式

    //混合模式:构造+原型
    function person(name,age){
        this.name=name;
        this.age=age;
    }
    
    person.prototype={
        addr:"China",
        infos:function(){
            alert(this.name+" "+this.age+" "+this.addr);
        }
    }
    
    var p=new person("cyy",25);//构造函数部分需要传参,原型部分直接定义
    p.infos();//cyy 25 China
  • 相关阅读:
    [CF1469D] Ceil Divisions
    [CF632D] Longest Subsequence
    [CF1215E] Marbles
    [CF689D] Friends and Subsequences
    [CF707D] Persistent Bookcase
    [CF10D] LCIS
    [CF713C] Sonya and Problem Wihtout a Legend
    [CF1114E] Arithmetic Progression
    [CF1404B] Tree Tag
    [CF710E] Generate a String
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12301366.html
Copyright © 2020-2023  润新知