JavaScript 对象(一)
来源:互联网 发布:矩阵优化 编辑:程序博客网 时间:2024/06/05 06:53
一、对象的定义
对象是JavaScript的一个基本数据类型,是一种复合值,它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值。即属性的无序集合。
( 对象和数组很类似,唯一的不同是它的键值类型是自定义的 )!
二、对象的创建(多种方法)
1、对象直接量 / 字面量
var obj = { name: "龙门课栈", job: "软件开发" } console.log(obj.name); // 龙门课栈
2、构造函数:
(1)、系统自带的的, eg: new Object(), Array(), Number(),Boolean(), Date()…
var obj = new Object(); obj.name = "龙门课栈"; obj.job = "软件开发"; console.log(obj.job); // 软件开发
(2)、自定义的:为了和普通函数区分,首字母大写,采用大驼峰式写法(普通函数采用小驼峰式写法)
function Obj (name) { this.name = name; this.age = 18;} var obj = new Obj('龙门课栈'); console.log(obj.name); //龙门课栈 console.log(obj.age); //18
自定义构造函数的基本构造原理:
首先,文字理论解释一番,其实一切的关键全在与new这个操作符上,用new和不用new返回的结果大相径庭。不用new,则Obj(‘龙门课栈’)根本就是一个函数的正常执行,没有返回值,则默认返回undefined,而是用new操作符后js引擎就会将该函数看作构造函数看待,经过内部的一系列隐士操作,返回值就是一个对象了。
看下如下demo
demo1:用new和不用new的区别演示:
function Obj () { this.age = 18;} // 不用new console.log(Obj()); // undefined // 用new console.log(new Obj()); //Obj {age: 18}
demo2 用new返回值为对象的基本原理:
不用new,函数内的this指向的是window,所以this.xxx定义的变量都是window上的属性,但为什么使用new后其中的this就不是window对象了呢?那是因为
用new后,js引擎会在函数被进行两步隐士操作(假设构造函数名为Person):第一步, var this = Object.create(Peson.prototype); (也是创建对象的一种方法,下边会讲到) 隐士的改变函数内this的含义,现在函数内的this是一个原型为Person.prototype, 构造函数为Person的对象(其实此过程就将想要的对象基本创造成功了,只是差些属性而已,从此可是看出构造函数创建对象的最根本原理是借用Object.create()方法来实现的,只不过被封装功能化了); 第二步, 在创建的对象设置完所需要的属性后,隐士的将创建的对象this通过return返回 return this;
例子:
// 构造函数的原型 Person.prototype = { say: function () { console.log('I am saying'); } } // 构造函数 function Person () { // 隐士操作 // var this = Object.create(Person.prototype); //返回对象属性的设置 this.name = '龙门课栈'; this.age = 18; // 隐士操作 // return this; } var person1 = new Person(); console.log(person1.name); // 龙门课栈 person1.say(); //I am saying
上述两步理论的验证:
第一步:现在函数内的this是一个原型为Person.prototype, 构造函数为Person的对象
// 构造函数的原型 Person.prototype = { say: function () { console.log('I am saying'); } } // 构造函数 function Person () { this.name = '龙门课栈'; this.age = 18; // 打印this对象的原型 console.log(this.__proto__); // // 验证this是否是Person构造函数的实例 console.log(this instanceof Person); //true } new Person();//打印结果如下 // Object say: ()__proto__: Object // true Person();//打印结果如下 // Window // false
第二步:隐士的将创建的对象this通过return返回
由以上一些代码,我们已经可以看出返回的是满足条件的对象,现在我们创建对象时不用new,并显示的模拟这两步隐士操作来验证(我们不用new则两步隐士操作就不会产生)
// 构造函数的原型 Person.prototype = { say: function () { console.log('I am saying'); } } // 构造函数 function Person () { var that = Object.create(Person.prototype); that.name = '龙门课栈'; that.age = 18; return that; //提前返回that导致return this无法执行而失效 } var person = new Person(); //此处不用new也是可以成功返回一个满足条件的对象,因为显示的返回了that console.log(person.name); //龙门课栈 person.say(); //I am saying
ps: 关于显示返回that的问题,当我们用new生成对象,若我们显示return的是一个对象 / 引用值,则会导致return this失效,若返回的是原始值,则return this不会失效
3、Object.create(原型); 创建一个继承该原型的实例对象
关于此方法的一些注意事项:
(1)、若传参为Object.prototype,则创建的原型为Object.prototype,和 new Object()创建的对象是一样的
Object.create(Object.prototype) <==>new Object();
(2)、若传参为空 或者 null,则创建的对象是没有原型的, 导致该对象是无法用document.write()打印会报错,因为document.write()打印的原理是调用Object.prototype.toString()方法,该对象没有原型,也就没有该方法,所以document.write()无法打印
由此延伸的知识点: 引用值都也是算作是对象,所以都可以用document.write()打印;原始值numebr, boolean, string都有自己对象的包装类,借助此机制也是可以用document.write()打印出的;
但undefined 和 null既不是引用值,也没有对应的包装类,所以应该无法打印的,但大家会发现这两个值也是可是用document.write()打印的,因为这两个值被设定为特殊值,document.write()打印其是不用调用任何方法的,而是之直接打印其值
- Javascript对象(一)
- JavaScript 对象(一)
- JavaScript对象(一)
- JavaScript 对象(一)
- JavaScript中的对象(一)
- JavaScript内部对象(一)
- javascript-面向对象(一)
- JavaScript 面向对象(一)
- javascript内置对象(一)
- javascript(一) JavaScript之Array对象
- javascript面向对象(一)-创建对象
- JavaScript 面向对象(一)认识对象
- JavaScript对象(一)之String对象和Date对象
- javascript面向对象编程(一)
- Javascript 面向对象编程(一):封装
- Javascript 面向对象编程(一):封装
- Javascript 面向对象编程(一):封装
- JavaScript 面向对象编程 (一)
- LeetCode 15. 3Sum
- ScrollView监听是否滑动到底部
- 自动化测试之页面元素组织
- 11.25日笔记
- jmeter报错java.lang.NoSuchMethodError: org.apache.jmeter.samplers.SampleSaveConfiguration.setFormatter
- JavaScript 对象(一)
- android app 安装后的名称
- Android Handler 机制实现原理分析
- HDOJ 2162 Add ‘em(水题)
- Linux下内核编译
- 旋转数组的最小数
- 操作系统-最坏适应算法
- JSON
- 自顶向下,逐步求精