js中的对象学习笔记

一、object类型

1. {
2. k : v,
3. k : v,
4. k : v,
5. k : v   <-----注意这里最后一个没有逗号很容易出错！！！格式严谨！！！

}

JSON要比对象字面量，要严格，严格在哪儿呢？就是所有的k，必须加引号。

JSON：

{ "k" : v, "k" : v, "k" : v, "k" : v }

但是，下面的特殊情况，这个k必须加引号：

k是特殊字符

k是数字

k是有空格

k是关键字、保留字

先说一下，上面这些情况，也同时不能使用点语法来访问属性了，比如使用方括号：

var obj = { name : "考拉" } console.log(obj["name"]);

特殊形式的k，必须要加上引号，检索属性的时候，必须用方括号：

var obj = { "24&*$&#@@)@!" : "哈哈", "all name" : "考拉", "++++%%%%" : "嘻嘻", "var" : "么么哒", "function" : "嘻嘻" } console.log(obj["24&*$&#@@)@!"]); console.log(obj["all name"]); console.log(obj["++++%%%%"]); console.log(obj["var"]); console.log(obj["function"]);

对象的属性的访问，点语法是有局限的，它不能访问上面的特殊的那些情况。也不能访问以变量保存的k：

var obj = { name : "考拉", age : 18, sex : "男", "study score" : 100 } //console.log(obj."study score");//错误的 console.log(obj["study score"]); //正确的 console.log(obj["a" + "ge"]); //正确的 var a = "sex"; console.log(obj[a]); //正确的 </script>

1. var obj = new Object(); //这是一个空对象，里面没有任何属性

var obj = { name : "考拉", age : 18, sex : "男" };

构造函数方式：

var obj = new Object(); obj.name = "考拉"; obj.age = 18; obj.sex = "男";

二、对象的方法

当一个对象的属性的值，是一个函数，那么这个函数我们就称为对象的“方法”(method)。

方法就是一个对象能够做的事情，一般来说，就是一个动词。比如小明打招呼、长大、变性方法。

var xiaoming = { name : "小明", age : 18, sex : "男", sayHello : function(){ alert("你好，我是" + this.name); alert("今年" + this.age + "岁了"); alert("我是可爱的小" + this.sex + "生"); } } xiaoming.sayHello();

一个对象，方法函数里面的this指的是这个对象。

• 构造函数

注意，我们学习Java、C++、C#语言的惯例，构造函数以大写字母开头。

function People(){ }

JavaScript规定，一个函数可以用new关键字来调用。那么此时将按顺序发生四件事情：

1）隐秘的创建一个新的空对象

2）将这个函数里面的this绑定到刚才创建隐秘新对象上

3）执行函数体里面的语句

4）返回这个新的对象

我们称呼这个函数，叫做构造函数，一般的，构造函数用大写字母开头。也叫作People“类”。

我们称呼xiaoming这个对象是People类的实例。

当一个函数用()调用的时候，this就是window

当一个函数用对象方法调用的时候，this就是这个对象

当一个函数绑定给一个HTML元素事件的时候，this就是这个HTML元素

当一个函数用定时器调用的时候，this就是window

当一个函数用apply、call调用的时候，this就是你指定这个东西

当一个函数用new调用的时候，this就是隐秘创建的空对象，函数里面的语句将被执行，并且返回新对象

1.People.prototype = {

name : "考拉",

sex : "男",

age : 18

}

1. People.prototype.name=”考拉”

两种赋值方法

//构造函数，构造函数里面没有任何语句，也就是说，这个构造函数在执行的时候，不会给创建出来的对象添加任何属性。 function People(){ } //构造函数的原型，我们更改了构造函数的原型，为一个新的对象： People.prototype = { name : "考拉", sex : "男", age : 18 } //当一个对象被new出来的时候，不仅仅执行了构造函数里面的语句，也会把这个函数的__proto__指向构造函数的prototype。 var xiaoming = new People(); console.log(xiaoming.__proto__); console.log(xiaoming.__proto__ == People.prototype); //当我们试图访问name、sex、age属性的时候，身上没有。那么就去查找原型，原型身上有，就当做了自己的属性返回了。说明给原型对象加了属性以后 构造函数身上却没有这个属性 console.log(xiaoming.name); console.log(xiaoming.sex); console.log(xiaoming.age);

通过构造函数出来的对象给原型对象加属性以后，后面通过构造函数构造的对象都有这个原型对象的属性

当我们试图访问一个对象身上的属性的时候，如果这个对象身上有这个属性，则返回它的值。如果它身上没有这个属性，那么将访问它的原型对象，检测它的原型对象身上是否有这个值，如果有返回它原型对象身上的这个值。

4.2 原型的用途

我们定义一个方法的时候，如果写在构造函数里面：

function People(name,age){ this.name = name; this.age = age; this.sayHello = function(){ alert("你好,我是" + this.name + "我今年" + this.age + "岁了"); } } var xiaoming = new People("小明",12); var xiaohong = new People("小红",11); xiaoming.sayHello(); xiaohong.sayHello();

实际上这个函数被复制了两份，一份给了xiaoming，一份给了xiaohong。xiaoming和xiaohong这两个实例身上有了相同功能的函数，但是这个函数不是同一个函数！

而函数天生要被复用，你没有复用函数：

alert(xiaoming.sayHello == xiaohong.sayHello); //false

xiaoming身上的函数，和xiaohong身上的函数，不是同一个函数。

那应该怎么办呢？一句话：所有的属性要绑在对象身上，而所有的方法，定义在对象的原型对象中：

function People(name,age){ //构造函数里面，负责定义一些属性，随着构造函数的执行，这些属性将绑定到new出来的对象身上 this.name = name; this.age = age; } //把所有的方法，定义在原型对象身上： People.prototype.sayHello = function(){ alert("你好,我是" + this.name + "我今年" + this.age + "岁了"); }

alert(xiaoming.sayHello == xiaohong.sayHello);

  证明了xiaoming的sayHello方法和xiaohong的，是同一个函数。内存消耗小很多。

People.prototype.constructor //指向构造函数

我们之前说过，一个对象的原型身上有什么，那么实例对象就也可以打点调用什么，所以：

xiaoming.constructor   //指向构造函数

只要是对象，一定有原型对象，就是说只要这个东西是个对象，那么一定有__proto__属性。

世界上只有一个对象没有原型对象，这个对象就是Object.prototype。

Object是一个函数，是系统内置的构造函数，用于创造对象的。Object.prototype是所有对象的原型链终点。

所以，当我们在一个对象上打点调用某个方法的时候，系统会沿着原型链去寻找它的定义，一直找到Object.prototype。

所有的引用类型值，都有内置构造函数。比如

new Object()

new Array()

new Function()

new RegExp()

new Date()

我们来看看数组的情况：

函数也是对象。JavaScript中函数是一等公民，函数是对象。函数也是对象，只不过自己能()执行。

基本类型值，也有包装类型。所谓包装类型，就是它的构造函数。

new Number()

new String()

new Boolean()

所以你就能明白，为毛毛”abc”能够调用indexOf()方法，是因为String.prototype身上有这个方法。

们有两种写法去往构造函数的原型身上加方法：

第一种，追加属性：

Dog.prototype.sayHello = function(){ alert(this.name); }

第二种，简单粗暴直接覆盖整个原型：

Dog.prototype = { sayHello : function(){ alert(this.name + this.age); } }

第二种的方法，有隐患，就是你的构造函数的原型(Dog.prototype)与构造函数(Dog)失联了。无法通过Dog.prototype.constructor访问构造函数Dog了。这是因为对象字面量的constructor一定是Object

简单粗暴法就是有这个弊端，如何解决呢？如果你觉得constructor真的这么重要，那么就补一个constructor属性就行了：

Dog.prototype = { constructor : Dog, sayHello : function(){ alert(this.name + this.age); } }

子类的prototype等于父亲的某个实例

来看一个具体案例：

function People(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } People.prototype.sayHello = function(){ alert("你好我是人" + this.name); } People.prototype.chifan = function(){ alert("我吃饭了！mia mia"); } function Student(name,age,sex,xuehao,xiaohonghuageshu){ this.name = name; this.age = age; this.sex = sex; this.xuehao = xuehao; this.xiaohonghuageshu = xiaohonghuageshu; } //核心语句，继承的实现全靠这条语句了： Student.prototype = new People(); Student.prototype.sayHello = function(){ alert("你好我是小学生，我的学号是" + this.xuehao); } Student.prototype.study = function(){ alert("好好学习，天天向上"); } Student.prototype.lol = function(){ alert("玩儿英雄联盟啊！"); } var xiaohong = new Student("小红",11,"女",20160001,4); //xiaohong.lol(); //xiaohong.chifan(); xiaohong.sayHello();

子类可以覆盖父类的一些方法，父类的方法不冲突，因为我们子类追加的方法，追加到了父类的实例上。

这种方法不行：追加子类方法的时候，父类也被改了：

三、对象与属性

3.1 in运算符

返回一个布尔值，表示这个属性是不是对象的属性。

var obj = { a : 1, b : 2, c : false } console.log("a" in obj); //true console.log("b" in obj); //true console.log("c" in obj); //true console.log("d" in obj); //false

in不仅仅检测是对象自己有没有这个属性，如果原型链上有这个属性，那么也会返回true。整个原型链如果没有这个属性，就返回false。也就是说，in操作符会进行原型链查找。

for in 这个循环，会把原型链上所有的可枚举的属性列出来：

for(var k in obj){ console.log(k); }

什么是可枚举，系统默认的属性（比如constructor）都是不可枚举的。for in循环能够把自己添加的属性罗列出来，罗列的不仅仅是自己身上的属性，还有原型链上的所有属性。

3.2 hasOwnProperty方法

这个方法定义在了Object.prototype对象上面，所以任何一个Object都能够拥有这个方法。

这个方法返回true、false。表示自己是否拥有这个属性，不考虑原型链。就看自己身上有没有这个属性，不进行原型链查找。

var obj = { a : 1, b : 2, c : 3 } obj.__proto__ = { d : 4 } console.log(obj.hasOwnProperty("a")); //t console.log(obj.hasOwnProperty("b")); //t console.log(obj.hasOwnProperty("c")); //t console.log(obj.hasOwnProperty("d")); //f

3.3 对象直接打点验证某个属性是否存在

对象打点调用属性，我们之前的课程已经讲过，遍历原型链。所以就可以看出来属性是否在自己身上、原型链上。如果在，就返回值；如果不在就返回undefined.

var obj = { a : 1, b : 2, c : 3 } obj.__proto__ = { d : 4 }   console.log(obj.m); //undefined   console.log(obj.a); //1   console.log(obj.b); //2   console.log(obj.c); //3   console.log(obj.d); //4

有个误会，比如obj.m值就是undefined，那么obj.m还是返回undefined。不知道m属性存在不存在。

四、instanceof运算符

类在英语里面叫做class，实例在英语里面叫做instance。

instaceof运算符：

A instaceof B

验证A对象是不是B类的实例。

比如：

//类，构造函数 function Dog(){ } //实例化一个对象 var d = new Dog(); //验证d是不是Dog的一个实例 console.log(d instanceof Dog);

这里要注意一个事儿：“HelloKitty是狗”：

//类，构造函数 function Dog(){ } function Cat(){ } Cat.prototype = new Dog(); //继承 var hellokitty = new Cat(); //通过cat来实例一个 console.log(hellokitty.constructor); //Dog console.log(hellokitty instanceof Cat); //true console.log(hellokitty instanceof Dog); //true

instanceof 运算符的机理： 遍访hellokitty这个对象的原型链上的每个原型对象，如果遍访到这个原型对象，是某个构造函数的prototype，那么就认为hellokitty是这个构造函数的实例，返回true。

一个数组用typeof检测的时候，返回object

var arr = []; console.log(typeof arr);

正则表达式也是：

var obj2 = /ABC/g; console.log(typeof obj2);

用instanceof运算符能够轻松解决数组的识别：

var arr = []; console.log(arr instanceof Array);

ECMAScript5标准中新增了一个API验证数组：

Array.isArray(arr)

IE9开始兼容。

总结一下，A instanceof B， 不能证明A是new B()出来的，因为可能是继承。

角度计算问题

Js中角度计算是按照弧度制Π

a能够正常输出100。JS文件（JS包)是不能隔开作用域的。在JavaScript中，唯一能够隔开作用域的就是function。

JS包里面定义的变量、函数，将在HTML外部失去变量声明的提升、函数声明头的提升。

本质上，写在不同的<script></script>标签对儿里面的变量、函数，就已经失去变量声明的提升、函数声明头的提升。

JS的执行顺序，就是引包顺序的先后顺序。

包不能隔开作用域的：

所有的刚性的、事关穿不穿帮、事关安全的，都要写在window.onload里面。