说起对象,我们不会太陌生,大家一定知道‘万物皆对象’,那么今天我们来讲一下JavaScript中的对象。
对象
对象是也是一种 基础的变量类型。 对象里面包括属性和方法。
对象的创建方法
首先来说一下对象的创建方法:有三种。
1、对象字面量/对象直接量(PlainObject)
var obj = {}
2、利用构造函数来实例化对象
(1)系统自带 的构造函数
eg: Object(); Array() ; Number(); Boolean(); String(); Date();等
var obj = new Object(); obj.name = 'abc'; obj.age = 18;
(2) 自定义
function demo(){}; var obj = new demo();
说起构造函数,我们要重点学习一下。
为了区分函数和构造函数,我们人为地把构造函数用大驼峰式命名
(大驼峰式命名规则 TheFirstName 小驼峰式命名规则 theFirstName)
构造函数执行的时候就会有一个内部原理下面介绍一下;
构造函数的内部原理(三段式)
1、在函数体最前面隐式的加上this = {}
2、执行this.xxx = xxx;
3、隐式的返回this
当调用new的时候会调用构造函数三段论
我们来理解一下:
// 通过this构造函数来实现车间构造流程 function Car() { this.name = "BMW" this.height = "1400"; this.lang = "4900"; this.weight = 1000; this.health = 100; this.run = function (){ this.health --; } } var car = new Car(); var car1 = new Car();
this = { name :'BMN', height : '1400', lang : '4900', weight : 1000, health : 100, run : function(){} }
在函数的最后会隐式return this
提到return this,我们可以研究一下,如果我们return {} 则会返回{};但是如果我们 return 123;则没有对构造函数产生影响,因为构造函数实例化对象,return只能返回对象。(有new就会返回对象)。
以上述构造车间流程为例;如果我们想有些功能可以自定义,比如使得不同车间生产的车的颜色各不相同。我们要怎么才能实现呢?
类似这种情况,我们可以传参,参数才能使函数发生变化,才能变成自定义的环节。此时颜色属于我们自定义的环节,我们可以传参数color
function Car(color) { this.color = color; this.name = "BMW" this.height = "1400"; this.lang = "4900"; this.weight = 1000; this.health = 100; this.run = function () { this.health--; } } var car = new Car("red"); var car1 = new Car("green");
现在我们模拟一下 构造函数:
function Person(name, height){ var that = {}; that.name = name; that.height = height; return that; } var Person1 = new Person("xiaowang", 178); var Person2 = new Person("xiaofang", 180); console.log(Person1);JavaScript 里面的 构造函数 与c++里面的类相似。
注意: 小括号里面要填构造函数的原型(对象)
Object.create(proto [, propertiesObject ]) 是E5 中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。
function demo(){ } demo.prototype = { name : 'abc', age : 15, } var obj = Object.create(demo.prototype);
对象属性的增删改查
JavaScript里面的对象与c++、 c等里面的对象不同。 c++、 c等里面的对象需要一个类,通过这个类批量生产对象,生来是死的,不灵活。但JavaScript的类是完全灵活的,可以后天修改、删除等。比如以下代码为例:
var mrDeng = { name : "MrDeng", age : 40 , sex : "male", health : 100, smoke : function (){ console.log('Cool!'); this.health --; }, drink : function (){ console.log('I am drink!'); this.health ++; } }
增
mrDeng.wife = "xiaqoliu";
删
delete 对象名.属性名
改
mrDeng.wife = "xiaoWang"
查
对象名.属性名 mrDeng.sex; 对象名没有会报错,而属性名没有打印undefined
包装类
我们都知道原始值不能有属性和方法,只有函数或引用值有自己的属性和方法。那么原始值怎么才能调用自己的属性和方法呢?
解释一下:当我们用原始值调用属性或者方法的时候,会隐式调用包装类,包装类产生执行后立即delete。
举个例子说明一下吧。
var num = 4; num.len = 3; //--->当num调用原始值的时候就会产生 new Number(4).len 的包装类并被赋值3 ,然后delete console.log(num.len); //---->此时num再次调len 属性,则会产生一个新的包装类,则为undefined,执行过后 delete注:上面例子中两次产生的包装类是完全不同的。
给出一道题,自己练习一下吧。
var str = "abc"; str +=1; //abc1 var test = typeof(str); if(test.length == 6){ test.sign = "typeof的返回结果可能为String"; } console.log(test.sign);打印出 undefined
解释一下:if条件句里面相当于string.length==6 此时调用包装类,然后delete,所以最后打印出undefined
欢迎大家补充。