js创建对象

港控/mmm° 2022-07-13 00:20 208阅读 0赞

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

当我们用`obj.xxx`访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到`Object.prototype`对象，最后，如果还没有找到，就只能返回`undefined`。

例如，创建一个`Array`对象：

var arr = [1, 2, 3];

其原型链是：

arr ----> Array.prototype ----> Object.prototype ----> null

`Array.prototype`定义了`indexOf()`、`shift()`等方法，因此你可以在所有的`Array`对象上直接调用这些方法。

当我们创建一个函数时：

function foo() { 
        return 0;
    }

函数也是一个对象，它的原型链是：

foo ----> Function.prototype ----> Object.prototype ----> null

由于`Function.prototype`定义了`apply()`等方法，因此，所有函数都可以调用`apply()`方法。

很容易想到，如果原型链很长，那么访问一个对象的属性就会因为花更多的时间查找而变得更慢，因此要注意不要把原型链搞得太长。

### 构造函数 ###

除了直接用`{ ... }`创建一个对象外，JavaScript还可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数：

function Student(name) { 
        this.name = name;
        this.hello = function () { 
            alert('Hello, ' + this.name + '!');
        }
    }

你会问，咦，这不是一个普通函数吗？

这确实是一个普通函数，但是在JavaScript中，可以用关键字`new`来调用这个函数，并返回一个对象：

var xiaoming = new Student('小明');
    xiaoming.name; // '小明'
    xiaoming.hello(); // Hello, 小明!

注意，如果不写`new`，这就是一个普通函数，它返回`undefined`。但是，如果写了`new`，它就变成了一个构造函数，它绑定的`this`指向新创建的对象，并默认返回`this`，也就是说，不需要在最后写`return this;`。

新创建的`xiaoming`的原型链是：

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是说，`xiaoming`的原型指向函数`Student`的原型。如果你又创建了`xiaohong`、`xiaojun`，那么这些对象的原型与`xiaoming`是一样的：

xiaoming ↘
    xiaohong -→ Student.prototype ----> Object.prototype ----> null
    xiaojun  ↗

用`new Student()`创建的对象还从原型上获得了一个`constructor`属性，它指向函数`Student`本身：

xiaoming.constructor === Student.prototype.constructor; // true
    Student.prototype.constructor === Student; // true
    
    Object.getPrototypeOf(xiaoming) === Student.prototype; // true
    
    xiaoming instanceof Student; // true

看晕了吧？用一张图来表示这些乱七八糟的关系就是：

![Center][]

红色箭头是原型链。注意，`Student.prototype`指向的对象就是`xiaoming`、`xiaohong`的原型对象，这个原型对象自己还有个属性`constructor`，指向`Student`函数本身。

另外，函数`Student`恰好有个属性`prototype`指向`xiaoming`、`xiaohong`的原型对象，但是`xiaoming`、`xiaohong`这些对象可没有`prototype`这个属性，不过可以用`__proto__`这个非标准用法来查看。

现在我们就认为`xiaoming`、`xiaohong`这些对象“继承”自`Student`。

不过还有一个小问题，注意观察：

xiaoming.name; // '小明'
    xiaohong.name; // '小红'
    xiaoming.hello; // function: Student.hello()
    xiaohong.hello; // function: Student.hello()
    xiaoming.hello === xiaohong.hello; // false

`xiaoming`和`xiaohong`各自的`name`不同，这是对的，否则我们无法区分谁是谁了。

`xiaoming`和`xiaohong`各自的`hello`是一个函数，但它们是两个不同的函数，虽然函数名称和代码都是相同的！

如果我们通过`new Student()`创建了很多对象，这些对象的`hello`函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。

要让创建的对象共享一个`hello`函数，根据对象的属性查找原则，我们只要把`hello`函数移动到`xiaoming`、`xiaohong`这些对象共同的原型上就可以了，也就是`Student.prototype`：

![Center 1][]

修改代码如下：

function Student(name) { 
        this.name = name;
    }
    
    Student.prototype.hello = function () { 
        alert('Hello, ' + this.name + '!');
    };

用`new`创建基于原型的JavaScript的对象就是这么简单！

### 忘记写new怎么办 ###

如果一个函数被定义为用于创建对象的构造函数，但是调用时忘记了写`new`怎么办？

在strict模式下，`this.name = name`将报错，因为`this`绑定为`undefined`，在非strict模式下，`this.name = name`不报错，因为`this`绑定为`window`，于是无意间创建了全局变量`name`，并且返回`undefined`，这个结果更糟糕。

所以，调用构造函数千万不要忘记写`new`。为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写，这样，一些语法检查工具如[jslint][]将可以帮你检测到漏写的`new`。

最后，我们还可以编写一个`createStudent()`函数，在内部封装所有的`new`操作。一个常用的编程模式像这样：

function Student(props) { 
        this.name = props.name || '匿名'; // 默认值为'匿名'
        this.grade = props.grade || 1; // 默认值为1
    }
    
    Student.prototype.hello = function () { 
        alert('Hello, ' + this.name + '!');
    };
    
    function createStudent(props) { 
        return new Student(props || {})
    }

这个`createStudent()`函数有几个巨大的优点：一是不需要`new`来调用，二是参数非常灵活，可以不传，也可以这么传：

var xiaoming = createStudent({
        name: '小明'
    });
    
    xiaoming.grade; // 1

[Center]: /images/20220713/f9eb9b1c89ed4a60abfd5c17618c554c.png
[Center 1]: /images/20220713/c2eae552a01f49cdb0255521adc32811.png
[jslint]: http://www.jslint.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS对象的创建

概念：对象是单个事物的抽象一台电脑、一个程序员、一辆法拉利、一个服务器等等，这些都可以称之为对象。当实物被抽象化为对象时，实物之间的关系就变成了对象之间的关系，从而达到

素颜马尾好姑娘i/ 2024年03月30日 15:27/ 0 赞/ 60 阅读

相关 js 高级-创建对象

1.字面量创建 var obj = { }; 2.函数形式 function Person(name,age){ this.name = n

喜欢ヅ旅行/ 2023年01月09日 15:37/ 0 赞/ 268 阅读

相关 js--对象创建模式

1.Object函数创建模式。 \先创建空的Object对象，再动态添加属性/方法 \适用于开始不确定对象的内部数据，但是语句过多 var p = new O

我不是女神ヾ/ 2022年12月04日 02:21/ 0 赞/ 199 阅读

相关 js创建数组，创建对象

一个英文字母占一个字节,一个中文占2个字节，字节用Byte表示(或者B) 1kb=1024B=1024\8bit 1kb=1024byte=1024\8bit

悠悠/ 2022年09月17日 11:22/ 0 赞/ 214 阅读

相关 js 创建对象

js创建对象方式：第一种模式：工厂方式 var lev=function(){ return "啊打";

桃扇骨/ 2022年08月20日 04:21/ 0 赞/ 213 阅读

相关 js创建对象

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。当我们用`obj.xxx`访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如

港控/mmm°/ 2022年07月13日 00:20/ 0 赞/ 209 阅读

相关 js创建对象

<script language="javascript"> //1、无参函数new出来 function Car()\{ var ōcar = new

分手后的思念是犯贱/ 2022年06月12日 11:16/ 0 赞/ 199 阅读

相关 JS创建对象

JS创建对象的方法有两种：１．通过原生形式创建对象(对象字面量表示法) var iphone9 = { color: 'yello

男娘i/ 2022年05月18日 09:20/ 0 赞/ 252 阅读

相关 js 创建对象

`javascript`创建 `对象`相对比较简单，代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

拼搏现实的明天。/ 2022年05月13日 07:28/ 0 赞/ 231 阅读

相关 JS创建对象__高级

虽然用Object构造函数或对象字面量可以创建单个对象，但有一个明显的缺点：使用同一个接口创建对象，会产生大量重复的代码。为此红宝书中又有三种基本的创建对象的方式：（１）工

傷城~/ 2022年04月06日 07:40/ 0 赞/ 257 阅读