JS 对象指向相关

0.引言:对象引用的原理:

首先,我们知道,创建对象有两种方法:
1、字面量直接创建。 2、构造函数法创建对象。 其中,构造函数法创建对象有些东西跟大家分享。

要搞清楚构造函数创建对象的原理,才不至于掉进坑里

创建对象的步骤应该都知道:

1.在内存堆区开辟空间,创建新对象

2.this 指向新创建的对象

3.执行函数体,给对象添加属性

4.返回新创建的对象地址

setp1.

首先看一张图,搞清楚我们创建的对象是如何在内存中存在的

写代码:


<script type="text/javascript">
        function Person () {
            this.name = "小雪";
        }

        var person1 = new Person();

01.png

很明显,堆区中是存储构造函数本体的区域,创建时第一步就是在堆区中开辟一片内存空间来存放新创建的实例对象


setp2

this 指针指向和添加竖向暂且不表,直接到最后一步,将变量名赋值给构造函数,该变量名保存在栈区。

注意:这里不能再叫赋值了,要叫引用,将变量名的指针指向该构造函数

再来一张图

02.png

虽然我们管实例出来的对象就叫 person1 但是 person1 只是一个代号,真正干活的是 new Person ,就像一个人的人名一样,你叫张三去买水,张三只是个这个人的名字,真正去买水的是张三这个人

同理可得,一个人可以改名,只要他还是他就行

再创建几个区别一下

<script type="text/javascript">
        function Person () {
            this.name = "小雪";
        }

        var person1 = new Person();
        var person2 = new Person();

        // console.log(new Person().name);
        // console.log(new Person().name);
        var person3 = person2;

看看有几个到底有几个人

console.log(person1 === person2);//false
console.log(person1 === person3);//false
console.log(person2 === person3);//true

能看出来一些问题,person2 与 person3 完全相同,也就是说,一共只有两个人,不过第二个人有两个名 person2 和 person3

再来一张图看看现在的情况

03.png

就是这么个意思

现在来修改person3

person3.name = "小黑";

        console.log(person1.name);//小雪
        console.log(person2.name);//小黑
        console.log(person3.name);//小黑
        console.log("-----------");

person2 与 person3 的 name 都变成了小黑,原因就是他俩就是一个人,只不过是名字不同,用术语来说,就是这两个变量名指向了同一个对象

再修改一下person3 的指向

person3 = new Person();
        console.log(person1.name);//小雪
        console.log(person2.name);//小黑
        console.log(person3.name);//小雪
        console.log("-----------");

这也不难理解,因为person3 现在是第三个人的名字了,所以第三个人的初始值就是person3 的 name 值

还有图

04.png

现在是三个人

再修改 person1 的指向

person1 = person2;
        console.log(person1.name);//小黑
        console.log(person2.name);//小黑
        console.log(person3.name);//小雪

现在第一个人没了,第二个人有两个名字 person1 和 person2

对象指针图.png

行了,很清晰 没毛病!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容