for...in 循环
循环数组我们可以使用for (var i = 0; i < arr.length; i ++) {...} 的方式循环遍历这个数组,在我们js中提供了一个方便我们遍历对象的一个操作for (var prop in obj) {...},通过这个可以拿到对象的每个属性名
用法
for...in 循环的作用只有一个,那就是遍历对象。他遍历拿到的是对象的属性名,就是key而不是value
使用示例,会输出name和age
var obj = {
name: "jack",
age: 18
}
// 使用for...in循环,打印出对象的所有属性名
for (var prop in obj) {
console.log(prop); // name age
}
// 想要获取到属性值可以这样写
for (var prop in obj) {
var value = obj[prop];
console.log(value); // jack 18
}
弊端
这个方法虽然好用,但是他会把这个原型上的属性和方法也获取到,如下
// 定义一个父对象
var parent = {
parentName: "jackParent",
parentAge: 80,
sayHi: function () {
print("my name is JackParent");
}
}
// 定义一个子对象
var son = {
name: "jack",
age: 18
}
// 设置这个子对象的原型指向定义的父对象(parent)
Object.setPrototypeOf(son, parent)
// 使用for...in循环遍历这个子对象,输出所有的值,他会把原型上面定义的属性和方法也遍历出来
for (var prop in son) {
console.log(son[prop]); // jack 18 jackParent 80 function () {}
}
hasOwnProperty()
概述
这个方法可以判断一个属性或者方法是不是自己身上的,不是原型上的。如果是自己身上的属性返回true,这个属性是原型上的属性,或者根本没有这个属性都会返回false
简单使用
// 定义一个父对象
var parent = {
parentName: "刘备"
}
// 定义一个子对象
var son = {
sonName: "刘禅"
}
// 设置子对象的原型指向父对象的原型
Object.setPrototypeOf(son, parent);
son.hasOwnProperty("sonName"); // true
son.hasOwnProperty("parentName"); // false
配合for...in循环使用
有了这个可以配合for...in循环使用,使之不会遍历到原型上面的属性。将上面弊端的for...in循环代码改成如下。
for (var prop in son) {
if(son.hasOwnProperty(prop)) {
console.log(son[prop]); // jack 18
}
}
这样就只会输出自己身上的属性和方法。
instanceof
- 判断一个实例的隐式原型,是否有指定的这个构造函数的原型
- 我们都知道,数组是由
Array这个构造函数构造出来的,那么这个实例的隐式原型必然会指向Array的原型如下
// 返回结果为true,证明数组的隐式原型上面有Array的原型
[] instanceof Array; // true
再来举一个例子
// 定义两个构造函数
function Person1() {}
function Person2() {}
// 使用Person1构造出实例
var demo = new Person1();
// 判断demo的隐式原型上是否有Person1的原型,因为是通过Person1构造出来的,所以必然为true
demo instanceof Person1; // true
// 判断demo的隐式原型上是否有Person2的原型,这个demo是不是跟Person2没有半毛钱关系,所以必然为false
demo instanceof Person2; // false
in关键字
这个关键字的作用是判断这个对象上面是否能访问到这个属性,能访问到返回true,否则返回false。如下
// 定义一个构造函数,给他添了两个属性
Person.prototype.sayHi = function () {
console.log("i am Jack");
}
function Person() {
this.name = "jack";
}
// 构造出实例
var person = new Person();
"name" in person; // true
"sayHi" in person; // true
"print" in person; // false