复习笔记（新手向） - JS对象声明的几种方式

davidac 发布于2019-08-23 11:58 / 2355人阅读

摘要：二用操作符构造对象属性名属性值属性名属性值属性名属性值属性名属性值方法名方法名首先用创建一个空对象，然后用多条语句给对象添加属性方法。他的写法与三用函数声明的方式构造对象比较像，但是稍有不同。

-- 新手向知识，就不用ES6写法了。

一、字面量声明

var obj = {
        属性名1 : 属性值,
        属性名2 : 属性值,
        属性名3 : 属性值,
        方法名1 : function() {
            .....
        },
        方法名2 : function() {
            .....
        }
    }

通过obj.属性名或obj.方法名()就可以读取或调用对象的属性/方法了。

二、用new操作符构造Object对象

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
    ....
};
obj.方法名2 = function() {
    ....
};
....

首先用new Object()创建一个空对象，然后用多条语句给对象添加属性/方法。

三、用函数声明的方式构造对象

函数Function本身就是对象Object的实例

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

所以可以模仿new Objcet()构造对象的方式，用function myFn() {}声明一个自定义的函数，然后通过new myFn()构造对象，比如：

function person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log("My name is "+ this.name + ", I"m " + this.age + " years old");
        }
    }
    var xiaoMing = new person("xiaoming", 16);
    xiaoMing.say(); //"My name is xiaoming, I"m 16 years old"

通过这种方式声明的对象，每一次new出来的对象都是独立的，互相不会有影响，属性、方法中的this指向的就是新创建的、调用他们的对象。

四、工厂模式声明对象

工厂模式声明对象可以理解成二、三两种方法的结合体，用三的思想套进二的内容。仿照上面例子举例：

function person(name, age) {
        var obj = new Object(); 
        obj.name = name;
        obj.age = age;
        obj.say = function() {
            console.log("My name is "+ obj.name + ", I"m " + obj.age + " years old");
        };
        return obj;
    }
    var xiaoMing = person("xiaoming", 16);
    xiaoMing.say(); //"My name is xiaoming, I"m 16 years old"
    var xiaoHong = person("xiaohong", 18);
    xiaoHong.say(); //"My name is xiaohong, I"m 18 years old"

工厂模式之所以叫工厂模式，就是类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果。他的写法与三、用函数声明的方式构造对象比较像，但是稍有不同。

每一次调用function 声明的函数时，它在内部new Object()，最后将这个新建的对象return回来，调用时就像普通函数调用一样，实例化的时候不用再new了（内部new过）。虽然多次调用该函数走的都是一样的流程，但是生产出来的两个产品互不影响。

五、原型方式声明对象

function person() {/*空*/};
    person.prototype.height = "1.80m";
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log( "I"m " + this.height + " tall and I"m in "+ this.grade);
    }
    var xiaoMing = new person();
    xiaoMing.say(); //"I"m 1.80m tall and I"m in Senior 3"

原型方式是将该对象的属性/方法写在他的prototype属性所指的对象上。（每一个函数或者说对象都有一个prototype属性，这个属性以对象的形式存在）。

每次new实际上有这么一些操作：

1)创建一个空对象
2)把这个空对象的__proto__指向构造函数的prototype
3)把这个空对象赋值给this
4)执行构造函数内的代码

new出来的新对象的__proto__属性都会指向person.prototype，然后就可以执行person.prototype上的函数内容了。

这有点像JS上常说的事件代理/委托。事件不直接绑定在该DOM元素上，而是绑定在它的父级元素，当给该DOM元素添加兄弟元素时，兄弟元素因为冒泡，能触发相同的事件。

六、混合模式

混合模式可以理解成原型模式+构造函数，举例：

function person(name, height) {
        this.name = name;
        this.height = height;
    };
    person.prototype.age = 18;
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log("Hello, my name is " + this.name + ". I"m " + this.age + " years old, " + this.height + " tall and I"m in "+ this.grade + ".");
    }
    var xiaoMing = new person("Xiaoming", "1.80m");
    xiaoMing.say();
    //"Hello, my name is Xiaoming. I"m 18 years old, 1.80m tall and I"m in Senior 3."
    var xiaoHong = new person("Xiaohong", "1.65m")
    xiaoHong.say();
    //"Hello, my name is Xiaohong. I"m 18 years old, 1.65m tall and I"m in Senior 3."

对比混合模式和原型模式可以发现，混合模式函数体不是空的，而函数体内的内容就是前边说的构造方式。

这种方式在实际开发中更加常用。

云服务器 GPU云服务器 java创建对象的几种方式 js继承的几种方式服务器请求的几种方式 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97771.html

判断是否是数组的几种方法— (js基础复习第1期)

摘要：如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。 1. 首先，typeof肯定是不行的对于一些基本类型，typeof是可以判断出数据类型，但是判断一些引用类型时候，不能具体到具体哪一种类型再来复习一下typeof的...

supernavy 2019-08-23 12:59 评论0 收藏0
复习Javascript专题（一）：基本概念部分

摘要：一数据类型基本类型引用类型类型判断返回结果未定义布尔值字符串数值对象或者函数拓展堆栈两种数据结构堆队列优先，先进先出由操作系统自动分配释放，存放函数的参数值，局部变量的值等。一、数据类型基本类型：`Null Boolean String Undefined Number(NB SUN)` 引用类型：`Array Function Object` 类型判断：typeof 返回结果...

LiangJ 2019-08-23 13:38 评论0 收藏0
js数组的各种方法

摘要：把数组的所有元素放入一个字符串。删除并返回数组的第一个元素从某个已有的数组返回选定的元素对数组的元素进行排序删除元素，并向数组添加新元素。返回该对象的源代码。把数组转换为本地数组，并返回结果。首先由一个朋友提的问题开始 var a = [].push(233) console.log(a) 结果是 1；一开始我也搞错了，以为返回的是新数组，然后去查了下资料，才没发现返回的是新数组的长...

LittleLiByte 2019-08-23 15:42 评论0 收藏0
React中组件通信的几种方式

摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 评论0 收藏0
React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

Anshiii 2019-07-01 10:49 评论0 收藏0