javascript 面向对象之构造函数、工厂方式、字面量

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 面向对象之构造函数、工厂方式、字面量，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5013字，纯文字阅读大概需要8分钟。

内容图文

作者：极客小俊
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
Blog博客园，原创web技术文章
个人博客: cnblogs.com

javaScript 面向对象之构造函数、工厂方式、字面量

什么是面向对象编程?

面向对象的英文全称:Object Oriented Programming , 简称OOP

首先我们要先了解面向过程的编程思想, 就是代码从上到下都没有封装的意思，某写代码裸露在外、没有模块化、代码杂乱无章的写法. 并且还不好维护，也不便于后期二次修改

面向对象的编程思想: 通俗的说就是要具备代码好维护、代码重用性高、耦合度低、高内聚、模块化、便于修改

名词解释:

高内聚: 指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。

低耦合: 指让每个模块尽可能的独立完成某个特定的子功能。

面向对象的主要特点:

1. 抽象:抓住核心问题, 去掉相关性不强的代码, 把类似一样的功能性代码放在一起、

   [把这个功能所需要的相同功能代码抽取出来,然后进行封装]

2. 封装:只能通过对象来访问方法 [提高可维护性]

3. 继承:从已有对象上继承出新的对象 [提高代码重用性]

4. 多态:让同一个[接口] 被不同的对象所继承或者实现，从而产生不同的处理方式

js是一门基于对象的语言

js是一门解释型的语言

js是一门脚本语言、弱类型语言!

分析什么是对象?

对象:具有特征和行为或者说 有属性和方法, 具体特指的某一个事物

对象的组成

属性 就是变量 表示一个对象的状态 对象下面的变量就叫做:属性

方法 就是函数 表示一个对象的行为过程 对象下面的函数就叫做:方法

javascript创建对象的三种基本方式

1.调用系统的构造函数创建对象

创建对象也叫实例化对象, Object是系统的构造函数

//语法
var 变量名 = new Object();

如何添加对象的属性和方法

添加属性: 如何添加属性？

var 变量名 = new Object();
变量名.属性名=值;

添加方法: 如何添加方法?

var 变量名 = new Object();

变量名.方法名=function(){ 
    ..代码段...
} 
    
或

function 函数名(){
    
}
变量名.方法名=函数名;

案例:

var obj=new Object();
obj.name='张三';
obj.age=33;
obj.city='重庆';
obj.say=function(){
    alert('张三说话了!');
}
console.log(obj);

这种创建方式的缺点是:

1.如果使用这种方式创建了多个对象、会产生对象不能分辨出到底属于哪一个类型!

2.每创建 一个对象都需要new Object() 一次 耗费内存空间、 不能一次性创建多个对象

小知识: 如何判断某一个对象引用变量是不是属于某一个类型?

语法: 对象引用变量名称 instanceof 类名称 返回true就是属于这个类 返回false不属于这种类型

this关键字的基本使用

在当前的对象方法中，可以使用this关键字代表当前对象

小知识: 访问对象属性和方法的另一种写法: 对象[“属性名”] 或 对象方法名

案例代码如下:

var obj2=new Object();
obj2.name='李四';
obj2.age=66;
obj2.city='北京';
obj2.say=function(){
    console.log('李四说话了');
    console.log(this.name);
}
console.log(obj2["name"]);
obj2["say"]();

2.工厂方式与构造函数

工厂方式也可以叫做封装函数

优点: 代码复用性提升、不同的数据当做参数进行传递

自定义构造函数创建对象

了解一下如何一次性创建多个对象?

工厂方法 方法1: 首先把创建对象的系统构造对象相关代码封装在一个函数中,不同的数据当做参数进行传递,然后返回创建好的对象

案例代码如下:

function createObject(username,age){
    var obj=new Object();
    obj.name=username;
    obj.age=age;
    obj.city='重庆';
    obj.say=function(){
        console.log(this.name+'的年龄是:'+this.age);
    }
    return obj;
}

var obj1=createObject('张三',23);
var obj2=createObject('李四',66);
obj1.say();
obj2.say();

工厂方法 方法2:自定义构造函数创建对象, 自己定义一个构造函数,创建对象

优点: 可以区分出对象引用属于哪一类

案例代码如下

//Person就是构造函数
function Person(username,age,city){
    this.name=username;
    this.age=age;
    this.city=city;
    this.say=function(){
        console.log(this.name+'的年龄是:'+this.age);
    }
}


var obj1=new Person('张三',33,'北京市');
var obj2=new Person('李四',66,'重庆市');
obj1.say();
obj2.say();

小结: 通过上面的案例可以小结出一个概念: 就是函数如果前面有new关键字，那么这个函数就是构造函数，否则就是一个普通函数

==在javascript中使用new关键字来修饰一个 普通函数的解答

系统做4件事情

1. 首先这个函数就成为了 构造函数, 因为 new 后面跟一个函数 这样的函数就叫构造函数

2. 在内存中开辟一块(申请一块空闲的空间)空间,存储创建的新对象

3. 构造函数中的this就设置为当前的对象

4. 就是说当new写在一个函数前面的时候、这个函数中的this就是创建出来的对象、并且函数的返回值直接默认就是this了 隐式返回,可以使用如下代码进行测试得出结论

   function Obj() {
   
   }
   //观察返回值
   console.log(Obj());       //undefined
   console.log(new Obj());   //Obj {}
   //所以this这个对象会返回, [ 这里的返回是自动的 无需在构造函数中使用return]
   

5. 如果有设置对象的属性和方法就设置值

3.字面量的方式创建对象

json对象是创建对象的一种字面量表示形式

var 变量名 = { } //这就叫字面量方式创建对象

案例代码

var obj={};
obj.name='张三';
obj.age=22;
obj.city='北京市';
obj.fn=function () {
    console.log('我的名字叫'+this.name+' 我的年龄是:'+this.age+' 我在'+this.city+'生活和工作!');
}

obj.fn();

推荐写法:

字面量优化后的形式:其实就是json数据格式的形式 [推荐写法]

案例代码

var obj2={
    name:'张三',
    age:22,
    city:'北京市',
    fn:function () {
        console.log(this);
        console.log('我的名字叫'+this.name+' 我的年龄是:'+this.age+' 我在'+this.city+'生活和工作!');
    }
};

obj2.fn();

function Obj() {
	
}
var test=new Obj();  //在内存中的堆区中开空间
console.log(test);

var json={}			//在栈区开辟空间 用完即释放
console.log(json);

内容总结

以上是互联网集市为您收集整理的javascript 面向对象之构造函数、工厂方式、字面量全部内容，希望文章能够帮你解决javascript 面向对象之构造函数、工厂方式、字面量所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端