js之oop <一> 创建对象,构造器(class)

js中除了基本类型,就是对象。可以说在js中处处皆对象。

由于js是弱语言,在编写的过程中很容易混淆 objectclass 也就是对象构造器

object(对象):一般对象都由var关键字声明。

class(构造器):js中function除了声明函数,也可以声明构造器。故构造器是特殊的函数。

创建对象:

常见创建对象的方法有两种。

(1)对象字面量

var obj = { a:1, b:2 };  obj.a; //输出1

对象字面量创建的对象中也可以嵌套对象

var obj = { a:1, b:2, c:{ cx:3, cy:4 } }; obj.c.cx; //输出3

字面量构造对象函数

var obj = {
    a:1,
    b:2,
    //创建对象函数
    add(){
        return this.a + this.b;
    },
    //函数重写
    add(x,y){
        return x + y;
    }
};
obj.add(obj.a,obj.b); //输出3
obj.add();            //输出3

注意:的是对象字面量创建出的并不是class(类)而是object(对象),所以字面量创建的对象不可以当做class去new。

var obj = { a:1, b:2 };  var obj_o = new obj(); //报错

(2)构造器创建对象。(class new object)

构造器创建对象,首先创建构造器(class)。这和其他语言的class new object同理。

创建构造器:

1、function创建构造器

function obj(){ }; //构造器
var obj_1 = new obj();     //创建对象

js中function可以作为函数也可以作为构造器。

2、Constructor创建构造器

    function obj(){
        this.name = "obj_name";
        this.from = "obj_china";
        this.say = function(){ console.log("my name is " + this._name + "I‘m from " + this.from); }
    }

    var obj_1 = new obj();
    obj_1.say();  //输出“my name is undefinedI‘m from obj_china”

Constructor创建构造器是用this关键字预先设定了一些属性和函数,以供class下的对象使用。

Constructor和工厂作用差不多,缺点就是每次创建一个对象就会调用一次工厂,浪费内存。

3、prototype创建构造器

    function obj(){}
    obj.prototype._name = "obj_name";
    obj.prototype.hobby = "obj_hobby";
    obj.prototype.arr = new Array();
    var obj_1 = new obj();
    var obj_2 = new obj();
    obj_1.arr.push("one");
    obj_2.arr[0]    //输出 one

缺点一旦修改原型属性,原型链上对象的属性都会被修改。

原型构造器,通过prototype定义一些属性和函数,通过原型构造器创建的每个对象都共用prototype定义的这些属性和函数。

时间: 2024-10-14 18:51:38

js之oop <一> 创建对象,构造器(class)的相关文章

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

js中OOP小指南

js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你意识到这是一种设计模式,像已经存在的这个模式,我们还有许多其它的设计模式,比如函数式编程和反应式编程. 这种模式的特点 我们在这个模式中所做的是以更接近实际的方式编程,我们使用类,对象,方法,属性等进行编程,并且集成了抽象,封装,模块化,隐私,多态和继承等术语. javascript的问题是,它不是

js 设计模式 oop 面向对象编程

最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword: funcion(){}; } //也可如此写 var

js设计模式之Constructor(构造器)

说明:最近正在看Addy Osmani写的<JavaScript设计模式>这本书,故记一下读书笔记与大家分享.本文的内容基本上都出自那本书,如果觉得不错可以去买一本看看. 9.1Constructor(构造器)模式 Object构造器用于创建特定类型的对象——准备好对象以备使用,同时接受构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法的值. 9.1.1 创建对象 var newObject=new Object(); //var newObject={}; //1.直接设置属性

03JavaScript程序设计修炼之道_ JS进阶 OOP、构造函数 2019-07/21-171247***0725-200514

note.txt js进阶部分 1 变量及其作用域 全局变量 局部变量 作用域 作用域链 let/var 区别 const 定义常量 2 异步专题 回调函数 同步异步 es6 Promise(使用和手写实现) 3 oop 原型 原型链 面向对象 ... es6 class 等 4 闭包 5 面试题 ... note.md 1 变量与常量 var a = 10; var一些问题 * var重复定义 会覆盖 * 没有块级作用域 * 变量会自动提升 es6 let/const * 重复定义会报错 *

js面向对象程序设置——创建对象

<script type="text/javascript">            //工厂方式        //1.原始方式        /* var objCar=new Object();        objCar.name="劳斯莱斯";        objCar.color="blue";        objCar.showColor = function() {          alert(this.colo

js中面向对象(创建对象的几种方式)

1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs.com/yuxingyoucan/p/5797142.html 一.创建对象的几种方式 javascript 创建对象简单的来说,无非就是使用内置对象或各种自定义对象,当然还可以使用JSON,但写法有很多,也能混合使用. 1.工厂方式创建对象:面向对象中的封装函数(内置对象) function cr

js面向对象oop编程

理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象究竟是什么?什么叫面向对象编程? 对象(object),台湾译作物件,是面向对象(Object Oriented)中的术语,既表示客观世界问题空间(Namespace)中的某个具体的事物,又表示软件系统解空间中的基本元素. 在软件系统中,对象具有唯一的标识符,对象包括属性(Properties)和方法(Methods),属性就是需要记忆的信息,方法就是对象能够 提供的服务.在面向对象(Object Oriented)

js之oop &lt;二&gt; 对象属性

js中对象属性可以动态添加和删除.删除对象属性用delete关键字. function obj(){ } var oo = new obj(); oo.a = "a"; oo.b = "b"; oo.a; //输出a oo.b; //输出b delete oo.a; oo.a; //输出undefined 在js中对象的属性以键值对的方式来体现,且(在遍历时)无序.js中属性名(也就是key)可以用点来访问(或赋值),也可以用中括号key值来访问(或赋值)(用中括号