面向对象:

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


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

对象的方法:事物的功能

对象:事物的一个实例

对象的原型:.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);//

闭包

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

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

var n=100;
function fn(){
alert(n);//
}
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()();//

闭包:函数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();//
nAdd();
res();//

闭包的优缺点:

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

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

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


在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

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

  1. Objective-C:三种文件导入的方式以及atomic和nonatomic的区别

    一.三种文件导入的方式比较:   类的前项声明@class.import.include: 1.采用@class 类名的方式,它会告诉编译器有这么一个类,目前不需要知道它内部的实例变量和方法是如何定义 ...

  2. Spring中三种配置Bean的方式

    Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...

  3. 浅淡Webservice、WSDL三种服务访问的方式(附案例)

    Webservice Webservice是使应用程序以与平台和编程语言无关的方式进行相互通信技术. eg:站点提供访问的数据接口:新浪微博.淘宝. 官方解释:它是一种构建应用程序的普遍模型,可以在任 ...

  4. Objective-C:三种文件导入的方式比较

    三种文件导入的方式比较:   类的前项声明@class.import.include:   1.采用@class 类名的方式,它会告诉编译器有这么一个类,目前不需要知道它内部的实例变量和方法是如何定义 ...

  5. 三种实现Ajax的方式

    本文主要是比较三种实现Ajax的方式 1. prototype.js 2. jquery1.3.2.min.js 3. json2.js Java代码 收藏代码 后台处理程序(Servlet),访问路 ...

  6. javascript 中数组的创建 添加 与将数组转换成字符串 页面三种提交请求的方式

    创建js数组 var array=new Array(); Java中创建数组 private String[] array=new String[3]; 两个完全不同的,js中是可变长度的 添加内容 ...

  7. (转)Spring的三种实例化Bean的方式

    http://blog.csdn.net/yerenyuan_pku/article/details/52832793 Spring提供了三种实例化Bean的方式. 使用类构造器实例化. <be ...

  8. 【转】ZYNQ中三种实现GPIO的方式

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/husipeng86/article/det ...

  9. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

随机推荐

  1. crtmpserver服务器的搭建

    https://blog.csdn.net/wutong_login/article/details/7612477 https://www.cnblogs.com/wangqiguo/p/60145 ...

  2. ios--->ios消息机制(NSNotification 和 NSNotificationCenter)

    问题的背景 IOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多,类之间的传值用到的比较多,不过委托相对来说只能是一对一,比如说页面A跳转到页面B,页面的B的值改 ...

  3. java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"

    问题描述 今天在使用SpringBoot整合spring security,使用内存用户验证,但无响应报错:java.lang.IllegalArgumentException: There is n ...

  4. Ubuntu安装openjdk8

    sudo apt-get update sudo apt-get install openjdk-8-jdk 通过 which java 找到java安装路径 添加环境变量 sudo vim ~/.b ...

  5. Dockers 部署 MongoDB + mongo-express

    1. 拉取 Mongo 镜像 docker pull mongo: 2.  运行镜像 docker run -d --name mongodb --volume /usr/local/mongodat ...

  6. React使用antd按需引入报错

    引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm ...

  7. ThreadLocalRandom ---- 提升Random在大并发下的效率

    本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 随机数 随机数在科学研究与工程实际中有着极其重要的应用! ...

  8. 测试用例设计:PICT的安装及使用

    一.下载与安装 打开百度网页,搜索PICT,即可找到许多下载链接,点击这里,下载到桌面,点击安装.一直NEXT,安装路径保存在C盘: 二.PICT 使用 1.找到安装目录,即可看到以下内容 2.创建t ...

  9. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  10. Linux密码策略--设置随机密码

    #!/bin/bash # @Author: HanWei # @Date: -- :: # @Last Modified by: HanWei # @Last Modified -- :: # @E ...