JS基础如何理解对象

这几天跟几个同事聊天发现他们对javascript什么时候该用new都不是很了解。

1、javascript的function什么时候该new什么时候不该new?
我觉得主要的问题还是集中在javascript的弱类型上面。

new在干什么

首先我们知道new是干什么,以我们java或.net的语言经验显然在创造对象。是的,不管是java还是.net。他是在创建一个对象。

new后面是什么

那么我们考虑一下new的后面是什么,(java和.net)一般是被一个class修饰的类名称。那么我们考虑一下,我们实例一个对象是干什么或者说设计者的目的是什么,那么一般情况下对象都会包含这些成员,属性与行为或者其中之一(我们在javaEE中DAO只有行为,POJO只有属性),有没有看到过既没有属性也没有行为的对象(当然类可以这么设计,但是没有意义)。

javascript的new干了什么
那么javascript的new干了什么?new其实开辟了内存空间创建了一个object这个object就是this,然后这个this的prototype指向了函数本身的prototype。
也就是说去new一个function的时候,开辟了一个this,这个this就是对象本身,再想想你去实例一个对象。你要拿到对象的成员,属性或方法或其中之一。this本身有几种方式能声明成员,一种在function函数体内部用this.的方式声明,例如:this.a = ‘123‘,其实就是给他的a属性赋了一个‘123’字符串,当然也可以赋值行为。还有种方式就是通过原型继承,通过function函数的.prototype的方式。
好了,因为javascript是弱类型,他没有class修饰,没有是否有返回值修饰,只有一个function修饰。所以function是否是构造函数很难通过函数头知道。所以是否需要去new就需要你去揣摩function的目的,他到底是不是构造函数。

实例代码说明
既然他是弱类型,他们可以根据内部的条件选择到底是做构造函数用,还是做普通函数用。再加上我们很多程序员都是其他语言出身,很少有人系统的学习了javascript,所以就很混淆。
下面我们来看混淆的例子吧。

Js代码

  • function Hello() {
  • this.a = ‘123‘;
  • this.b = function () {
  • alert(‘b‘);
  • }
  • return this;
  • }
  • Hello.prototype.c = function() {
  • alert(‘c‘);
  • }
  • var aHello = new Hello();
  • var bHello = Hello();
  • alert(aHello.a)
  • alert(bHello.a)
  • aHello.b();
  • bHello.b();
  • aHello.c();
  • bHello.c();

你会发现bHello.c()是执行不了的。在看看上面的函数,他为什么既能new又能不new。
new其实开辟了内存空间创建了一个object这个object就是this,然后这个this的prototype指向了函数本身的prototype。
不new就是执行了这个函数,最后return this就是返回了这个执行函数的宿主,其实就是window本身。
所以c函数是绑定在Hello的prototype上的,所以window上根本没有。

但是就出现了一个问题,就是如果在不执行c方法或者c本身不是通过原型继承的方式的话(就是不通过Hello的prototype方式,通过直接给this赋值的方式),其实创建的this的内容和window增加的内容是一样的,程序员会本能的以为new和不new是一样的。这样就掉坑里去了。

总结:javascript弱类型语言,一个函数即使是普通的执行函数,你new或不new都会出现编译器异常。
new与不new我们要做好以下几点。
1、首先大家要了解new本身干了什么,然后看函数创建者的意图,看函数结构。
2、一个好的程序员在提供某个javascript工具类或公用方法时,应该注释告诉你的调用者怎么去使用你提供的公用内容,或者提供工厂方法。

个人总结:

1、js 对象是什么 (太难理解了) ?

js对象是属性的集合

方法(Function) 数组(Array)对象(Object)都是对象

对象都是由函数产生的,只是我们平时看到的这种写法

var obj = {"a":"aaa","b":"bbb"}

这种其实是一种语法糖,其实等价于 var obj = new Object();obj.a="aaa".obj.b="bbb";

2、如何理解js中的对象

  1.抽象的角度:针对现实中的具体事物的一种抽象。

  2.数据的角度:将无需的变量集合在一起

时间: 2024-09-29 05:29:19

JS基础如何理解对象的相关文章

【2017-03-28】JS基础、windows对象、history对象、location对象

一.JS基础 JS - javaScript 1.js功能: 1).进行数据的运算.2).控制浏览器的一些功能.3).控制元素(属性.内容.样式) js引用位置: 可以放在html页的任意位置. 推荐放在<html></html>后边. 也可以放在一个以js结尾的文件内,将该文件引用到html页内. 2.格式: <script type="text/javascript"> js代码 </script> 1.alert("&qu

Js基础之常用对象

今天来总结一下js中的常用对象: 1.string对象 常用方法: charAt():返回在指定位置的字符. charCodeAt():返回在指定的位置的字符的 Unicode 编码. concat():连接字符串. fromCharCode():从字符编码创建一个字符串. String indexOf():检索字符串,返回字符串出现的位置,如果没有找到,返回-1. lastIndexOf():从后向前搜索字符串,返回字符串出现的位置,如果没有找到,返回-1 . split():把字符串分割为字

【JS基础】定义对象

var i ={}; 定义一个函数对象,该函数对象体为空,但不能说对象为空,执行alert(i)不是null var i = new Object(); 用Object原型创建实例 var i ="";  定义了一个变量,并初始化为空字符串 var arr = ();var arr = [];var arr = new Array(); //定义数组

js基础之内置对象

String对象:处理所有的字符串操作  Math对象:处理所有的数学运算  Date对象:处理日期和时间的存储.转化和表达  Array对象:提供一个数组的模型.存储大量有序的数据  Event对象:提供JavaScript事件的各种处理信息 内置对象都有自己的方法和属性,访问的方法如下: 对象名.属性名称 对象名.方法名称(参数表) String(字符串对象): 方法 String 对字符串的支持 String.charAt( ) 返回字符串中的第n个字符 String.charCodeAt

js基础梳理-究竟什么是变量对象,什么是活动对象?

首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, VO) 建立作用域链(Scope chain) 确定this指向 3.2 执行阶段 变量赋值 函数引用 执行其他代码 1.什么是变量对象(Variable Object) 在写程序的时候会定义很多变量和函数,那js解析器是如何找到这些变量和函数的? 变量对象是与执行上下文对应的概念,在

js基础梳理-如何理解作用域和作用域链?

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

js 基础知识 对象与数组

对象是一种无序属性的集合,每个属性都有自己的名字和值. 对象的创建有很多种,我在第一章已经说过了. 如何遍历一个对象: var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person)       //x其实是一个变量,代表的是person对象的属性{txt=txt + person[x];              //person[属性]  等

JS面向对象设计(1)-理解对象

不同于其他面向对象语言(OO,Object-Oriented),JS的ECMAScript没有类的概念, 它把对象定义为"无序属性(基本值.对象.函数)的集合",类似于散列表. 每个对象都是基于一个引用类型(原生类型.自定义类型)创建的. 1. 理解对象 创建自定义对象(Object构造函数.对象字面量). // Object构造函数:创建一个Object实例,再为实例添加属性和方法. var person = new Object(); person.name = "xia