the property of object

对象

一 对象的类型

1 对象的定义:在 ECMAScript 中,所有对象并非同等创建的。一般来说,可以创建并使用的对象有三种:本地对象、内置对象和宿主对象

1.1 本地对象: Object Function Array String Boolean Number Date 这些是基本的类(引用类型);使用这些引用类型的时候需要进行实例化;

1.2 内置对象 : Math 对象 Global 对象,这些对象在ECMAscript程序开始执行的时候出现,也就是说,我们不必实例化该对象,便可以直接引用它们内置的方法和属性;

1.3 宿主对象,所有非本地对象都是宿主对象,比如BOM和DOM

1.4 其中内置对象Math 对象和Global对象,这些对象的方法可以直接调用,比如Math.abs(), Math.random() ; 全局的eval() Number() parseInt() parseFloat() escape() ,但是Array String Date等本地对象的一些方法只能在实例化之后,应用在实例化的对象上;

二 对象的创建

1.对象创建包括三种方式: new 一个对象;字面量创建 ; ES5新增的Object.create();

1.1 var = { } ; var obj = { “name”:”Jhon”,”age”:18 }

1.2 通过构造函数new一个对象

1
2
function CreateObj (){ }
var obj = new CreateObj () ;

1.3 通过ES5的新方法 var obj = Object.create( obj1) 需要传入一个参数,该参数是一个对象

等价于 obj.prototype = obj1 ; Object.create( ) 方法会直接给原型添加属性

1
2
3
4
5
6
7
var obj = {
name : 'tom',
color : 'blue'
}
console.log(o);
var obj1 = Object.create(obj);//注意obj1的属性在其原型上
console.log(o1);

三 Javascript中对象内部 key : value 形式的构成:

1 构造函数实例化的属性包括两部分,一部分是”原生属性”,一部分是”原型属性”;

  • 一部分是通过构造函数内部直接创建或者obj.property = “value”直接创建,我么可以称作”原生属性”;
  • 一部分是通过原型创建,obj.prototype = value ; obj.prototype.property = value ;我们可以称作”原型属性”;
  • “原生属性”可以被操作,可以重新赋值,不同实例对象之间不会影响 ;
  • “原型属性”由构造函数创建的所有实例对象 共享 ,”牵一发而动全身”;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function CreateObj(){
this.name = "Jhon";
this.height = "180cm"
}
CreateObj.prototype = {"age":12,"address":"China"};
CreateObj.prototype.gender = "male";
CreateObj.prototype.fn = function(){
console.log("this is innerFunc");
};//通过原型创建属性
var obj1 = new CreateObj();
obj1.favour = "singing";//构造函数的"原生属性";
console.log(obj1);
</script>

2 对于实例对象的属性的操作由两种方式,通过操作符 和 直接操作原型属性

  • 通过点操作符设置属性的时候,只能操作原生属性 值,如果实例对象有该原生属性,那么则改变值,没有的话则创建原生属性,同时添加一个值;
  • 由于点操作符不能修改原型属性 的值,所以要通过实例化对象的proto属性值,通过proto属性修改的值,会应用到所有的由该构造函数创建的实例对象上,这就是”牵一发而动全身”;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
function CreateObj(){
this.name = "Jhon";
this.height = "180cm"
}
CreateObj.prototype = {"age":12,"address":"China"};//对象是复杂类型数据,传给prototype的是地址
//如果将原型形属性指向一个函数,那么后面创造的属性都是类似函数类型
//如果将原形属性指向一个基础数据类型,那么,后面则无法贼通过原型添加属性
CreateObj.prototype.gender = "male";//基础数据类型传值传的是值
//注意 obj.prorotype = value
CreateObj.prototype.fn = function(){
console.log("this is innerFunc");
};//通过原型创建属性
//实例化两个对象
var obj1 = new CreateObj();
var obj2 = new CreateObj();
console.log("通过原生属性修改后——————————");
obj1.age = "22";
//构造函数的"原生属性",可以直接通过点操作符直接设置和修改,点操作符只能访问原生属性,不能访问原型属性。
console.log(obj1,obj2);
console.log("通过原型属性修改后——————————");
obj1.__proto__.address = "American";//等价于下面这行代码 隐藏属性__proto__ 在实际生产中尽量不要用
// CreateObj.prototype.address ="American";
// 通过__proto__属性可以访问原型属性,进行设置和更改,注意如果通过原型属性修改属性的话,所有通过该构造函数创建的对象的原型属性值都会改变
console.log(obj1,obj2);
console.log(obj1.name);//Jhon
console.log(obj1.address);//American
</script>

看下图便于大家理解

对象属性内部构成

四 “一切皆对象”:

1 数组、函数、String包装对象都是对象,对象的操作同样适用于这些

五 : 对象中原型的继承

DOM 元素的继承如下

对象是由 new 运算符加上要实例化的对象的名字创建的