面向对象+闭包+三种对象的声明方式字面式、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;
 fn(){
    alert(n);100
}
fn();

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

 fn(){
    ;
}
fn();
alert(n);报错 n is not defined

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

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

;
     fn2(){
        alert(++n);
    }
    return fn2;
}
fn()();101

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

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

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

闭包的优缺点:

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

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

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

 

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

var lis=document.querySelectorAll("li");

for(var i=0;i<lis.length;i++){
    ((i){
        lis[i].onclick=(){
            alert(i);
        }        
    })(i);
}

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

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

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

 

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

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

new Object() 构造函数

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

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

构造方法声明对象

使用new来实例化

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

构造方法声明对象
 Person(name,age){
    this.name=name;this.name是属性 name是参数
    this.age=age;
    this.show=(){
        alert(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() 创建一个对象,并且返回这个对象

工厂模式
 person(name,1)"> Object();
    obj.name=name;
    obj.age=age;
    obj.infos=(){
        this.age+" 很可爱";对象的方法中要调用属性,必须使用this
    }
     obj;
}
var cyy=person("cyy",1)">);
alert(cyy.infos());cyy 25 很可爱

var cyy2=person("cyy2",1)">);
alert(cyy2.infos());cyy2 25 很可爱

 cyy和cyy2两者没有联系

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

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

 

原型模式声明对象

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

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

原型模式
 person(){

}
alert(person.prototype);//[object Object]
person.prototype.name="cyy";
person.prototype.age=25;
person.prototype.infos=(){
    this.age;
}

var p= person();
alert(p.infos());cyy 25

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

 person(){

}

json数据格式
person.prototype=.age);
    }
}

 person();
p.infos();cyy 25

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

混合模式:构造+原型
this.name=name;
    age;
}

person.prototype={
    addr:"China"this.age+" "+.addr);
    }
}

new person("cyy",25);构造函数部分需要传参,原型部分直接定义
p.infos();cyy 25 China

 

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...