ITPub博客

首页 > IT职业 > IT生活 > 玩转js中创建对象的模式

玩转js中创建对象的模式

IT生活 作者:tankII 时间:2021-09-09 09:43:30 0 删除 编辑

对于javaScrpt中对象的理解
图片描述

接下来就来看下如何去创建js对象

js中对象的创建方式主要有以下四种

1>字面量的创建模式

//字面量的方法创建对象
var obj = {
    name:"nihoa",
    age:33,
    say:function(){
        console.log('I am ' + this.name + "this yeat" +this.age);
    }
}
obj.say();

对于对象中的属性,当你要访问时,一定要通过对象 . 属性名来访问。

在对象的方法中,我们用的最多的是this,在方法中,this就表示这个对象。

2>第二种是工厂的创建模式

会有这种模式主要是为了解决,字面量创建模式批量创建的不足

工厂模式创建对象的优缺点:

优点:可以批量产生对象

缺点:它生产的对象没有“商标”也就是说不清楚构建函数是谁;

接下来看如何用代码实现工厂模式
//工厂模式的创建对象
 function Creatobj(name,age){

    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.say = function(){
        console.log('I am ' +" " + this.name +" "+ "today" +" "
        +this.age +" "+"years old");
    }

return obj;
}
var obj = Creatobj("xioahong",22)
var obj1= Creatobj("ximing",14)

3>第三种构建器的创建模式

(1),深入理解构造器

A, 构造器的作用:产生对象。 对象是由函数(构造器)创建的

B,如果说我们在调用函数时,给它前面加上了一个new,那么此时这个函数就,构造器。通常对于一个构造器,我们会把它的首字母大写。

C,任意一个函数都可以当作一个构造器

D,构造器是一个函数,也是一个对象,因为函数就是对象

E,构造器首字母大写,但是不是强制,但是是行业默认的规则

(2),不加new会怎样?

如果你在一个函数前面加上了new, 此时这个函数就是一个构造器,无论你在这个构造器中返回了什么,都返回一个对象。

对于本地的一些构造器,如Number, String, Array等,它们如果不加new,它就是一个普通的函数,
不是构造器。

如果构造器返回值是一个对象,那么使用new和不使用new得到的返回值是一样的。

(3),new究竟干了什么事?

new一共做了4件事:

1, var of = {};//创建一个对象

2,F.call(of) //将this指向of

3,of.proto = F.prototype // 上o具备原型对象上的方法

4,return of//把of 给返回出去;

构造器模式创建对象的有缺点

优点:解决了对象的来源不明问题,new的方式是其它大多数编程语言中的方式,被很多程序员接受,构造器模式也能批量产生。

缺点:创建出来的对象都有相同的属性,会造成内存空间浪费,没有体现出对象的封装,多态,和继承。

代码实现如下

//构建器模式

function Creatobj(name, age){
    this.name = name,
    this.age = age
    this.say = function(){
        console.log('I am ' +" " + this.name +" "+ "today" +" "
        +this.age +" "+"years old");
    }
}
var obj1 = new Creatobj("阿飞",22);
var obj2 = new Creatobj("小强",33)

4>原型的模式创建

再说原型的创建对象的模式之前先来看一下有关prototype的相关用法

javasript 中porotype的用法

prototype对象是实现面向对象的一个重要机制。每个函数也是一个对象,它们对应的类就是
function,每个函数对象都具有一个子对象prototype。Prototype 表示了该函数的原型,
prototype表示了一个类的属性的集合。当通过new来生成一个类的对象时,prototype对象的属
性就会成为实例化对象的属性。
下面以一个例子来介绍prototype的应用,代码如下:

当用new创建一个对象时,prototype对象的属性将自动赋给所创建的对象,例如:

2、利用prototype实现继承

在以上的代码中,首先是HelloSubClass具有了和HelloClass一样的prototype,如果不考
虑构造方法,则两个类是等价的。随后,又通过prototype给HelloSubClass赋予了额外的属性和方法
所以HelloSubClass是在HelloClass的基础上增加了新的属性和方法,从而实现了类的继承。

熟悉了原型的相关知识后就可以读懂如何运用原型的知识去创建对象的模式

function Creatobj(name, age){
    this.name = name,
    this.age = age 
}
Creatobj.prototype.say = function(){
    console.log('I am ' +" " + this.name +" "+ "today" +" " +this.age

    +" "+"years old");
}
var obj1 = new Creatobj("阿飞",22);

通过这种方式的创建函数对象可以完美的解决了用,构造器创建对象的缺点。

接下来看下javascipt中内建对象的分类

内建对象主要可以分为以下三大类

第一类是数据封装类对象

主要包括:object,Array,Boolean,Number 以及String这些对象都代表着javascript中的不同数据类型,并且都用着各自不同的typeof返回值以及undefined和null状态。

第二类是工具类对象

包括 Math,Date,RegExp,等用于提供便利的对象。

第三类是错误类对象

包括一般性错误对象以及其他各种更特殊的错误类对象。它们可
以在某些异常发生时帮助我们纠正程序工作状态。

最近看了好多有关js中的null的误区接下来简单看下null的知识点
在js中null 到底是不是对象ne?

在javascript中undefined表示变量声明但未初始化时的值。

null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针。虽然用typeof(null) 得出的Object。用 instranceof测试null是不是Object的实例的时候得出的结果是false;

console.log(null instanceof Object)
console.log(typeof null)

结果图如下:

图片描述

在JavaScript(ECMAScript标准)里共有5种基本类型:Undefined, Null, Boolean, Number, String,和一种复杂类型Object。

可以看到null和undefined分属不同的类型,未初始化定义的值用typeof检测出来是;undefined;(字符串),而null值用typeof检测出来是;object;(字符串)。

任何时候都不建议显式的设置一个变量为undefined,但是如果保存对象的变量还没有真正保存对象,应该设置成null。实际上,undefined值是派生自null值的。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1795/viewspace-2806544/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2022-07-18

  • 博文量
    0
  • 访问量
    5736