【JavaScript】创建对象的三种方式

JavaScript创建对象的三种方式

     1、调用系统的构造函数创建对象2、自定义构造函数创建对象（结合第一种和需求通过工厂模式创建对象）3、字面量的方式创建对象

一、调用系统的构造函数创建对象

举个栗子?

<script>//实例化对象var obj = new Object();//对象有特征，属性和行为//添加一些属性:对象.名字=值；obj.name = "小二";obj.age = 18;obj.sex = "女";//添加一个方法：对象.名字=函数；obj.hobby = function () {console.log("我喜欢学习");};//因为进行了赋值，所以这里要加分号结束//输出console.log(obj.name);console.log(obj.age);console.log(obj.sex);//方法的调用obj.hobby();
</script>

效果?

再举个栗子?

<script>//练习：有一个黄色小狗，叫大黄，今年3岁了，250斤的重量每次走路都很慢，喜欢吃大骨头//创建对象var smallDog = new Object();smallDog.name = "大黄";smallDog.age = 3;smallDog.color = "黄色";smallDog.weight = "250";smallDog.eat = function () {console.log("我是大黄，我要吃大骨头");};smallDog.walk = function () {console.log("我是大黄，我会摇尾巴");};//方法的调用smallDog.eat();smallDog.walk();
</script>

效果?

延申问题1：如何获取该变量（对象）是不是属于xxx类型的?

语法：变量 instanceof 类型的名字----> 布尔类型，true 就是这种类型，false 就不是这种类型在当前对象的方法中，可以使用this关键字

举个栗子?

<script>//创建一个人的对象var person = new Object();person.name = "小白";person.age = 10;person.sex = '男';person.sayHi = function () {//在当前这个对象的方法中，是可以访问当前这个对象的属性的console.log("你好，我叫："+person.name);//输出：你好，我叫小白};//创建一个学生的对象var stu = new Object();stu.name = "小茗同学";stu.age = 12;stu.sex = "男";stu.study = function () {console.log("我是小茗同学，我超级喜欢学习。");};//创建一个小狗的对象var dog = new Object();dog.name = "乐乐";dog.say = function () {console.log("我是小狗乐乐，我喜欢吃黄瓜?");};//输出这些对象是什么类型console.log(person instanceof Object);//true 意思是：是对象类型的console.log(stu instanceof Object);//true  意思是：是对象类型的console.log(dag instanceof Object);//true  意思是：是对象类型的
</script>

缺陷(⊙﹏⊙)：要创建无数个对象，累 skr 人儿。。。????
有没有什么好办法呢？？
当然！！那就是：???

延申问题2：如何一次性创建多个对象？

解决办法：把创建对象的代码封装在一个函数中----->工厂模式创建对象

<script>//工厂模式创建对象function createObject(name,age) {var obj = new Object();//创建对象obj.name = name;obj.age = age;obj.sayHello = function () {console.log("你好，我叫" + this.name + "，我今年" + this.age + "岁了");};return obj;}//创建人的对象var per1 = createObject("小芳",12);//调用上面的函数即可per1.sayHello();//输出:你好，我叫小芳，我今年12岁了var per2 = createObject("小圆", 20);//调用上面的函数即可per1.sayHello();//输出:你好，我叫小圆，我今年20岁了
</script>

效果?

二、自定义构造函数创建对象

举个栗子?

<script>//首先，自定义一个构造函数function Person(name,age) {this.name = name;this.age = age;this.sayHi = function () {console.log("我叫" + this.name + ",年龄是" + this.age);};}//然后，创建对象var obj = new Person("小明",10);console.log(obj.name);console.log(obj.age);obj.sayHi();//我叫小明,年龄是10var obj2 = new Person("大明",20);console.log(obj2.name);console.log(obj2.age);obj2.sayHi();//我叫大明,年龄是20//还可以验证一下这个对象的类型console.log(obj instanceof Person);//trueconsole.log(obj2 instanceof Person);//true
</script>

效果?

在这个过程中，自定义构造函数创建对象做了四件事情：

  1、在内存中开辟（申请一块空闲的空间）控件，存储创建的新的对象2、把this设置为当前的对象3、设置对象的属性和方法的值4、把this这个对象返回

三、字面量的方式创建对象

<script>//字面量的方式创建对象var obj = {//添加属性name : "小白",age : 19,sayHi: function () {console.log("我叫" + this.name + "，今年" + this.age + "岁");}};//调用方法obj.sayHi();//输出：我叫小白，今年19岁</script>

效果?

简单总结，如有不足，欢迎指正！?

【JavaScript】创建对象的三种方式相关推荐

JavaScript创建对象的三种方式之利用构造函数创建对象及使用方法(3)
(1.)我们为什么需要构造函数: 因为前面两种创建对象的方式一次只能创建一个对象. (2.)什么是构造函数: 构造函数:就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面 (3.)利用构造 ...
javascript创建对象的三种方式
2019独角兽企业重金招聘Python工程师标准>>> 1.一种更面向对象的方式,是定义新类的时候,将函数直接写入.这样的好处是更面向对象,在实例较少的时候,内存问题不会成为瓶颈. ...
JavaScript创建对象的三种方式之利用new object创建对象及使用方法(2)
1.利用new object创建对象及使用方法
JavaScript创建对象的三种方式之利用字面量创建对象及使用方法(1)
1.利用对象字面量创建对象{ } { }符号是对象的字面量 2.调用对象属性以及方法
课程介绍复习创建对象的三种方式自定义构造函数创建对象工厂模式创建对象
课程介绍 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
Spring创建对象的三种方式以及创建时间
创建对象的三种方式: 1.采用默认的构造函数创建 2.采用静态工厂方法 1.写一个静态工厂方法类 public class HelloWorldFactory { public static Hell ...
spring入门：beans.xml不提示、别名、创建对象的三种方式
spring的版本是2.5 一.beans.xml文件不提示 Location:spring-framework-2.5.6.SEC01\dist\resources\spring-beans-2.5 ...
IoC、Spring 环境搭建、Spring 创建对象的三种方式、DI
二.IoC 中文名称:控制反转英文名称:(Inversion of Control) 3.I oC 是什么? 3.1 IoC 完成的事情原先由程序员主动通过 new 实例化对象事情,转交给 Spri ...
Spring 学习之二----Spring创建对象的三种方式
最近在系统的学习Spring,现在就Spring的一些知识进行总结. 我们知道Spring是一个开放源代码的设计层面的框架,他主要解决的是业务逻辑层与其他各层之间松耦合的问题. Spring 有三个核 ...

【JavaScript】创建对象的三种方式

JavaScript创建对象的三种方式

一、调用系统的构造函数创建对象

延申问题1：如何获取该变量（对象）是不是属于xxx类型的?

延申问题2：如何一次性创建多个对象？

二、自定义构造函数创建对象

三、字面量的方式创建对象

【JavaScript】创建对象的三种方式相关推荐

最新文章

热门文章