美文网首页
js原型与in操作符

js原型与in操作符

作者: 落花的季节 | 来源:发表于2017-08-06 10:39 被阅读153次

有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在实例中还是原型中。

function Person(){
  
}

Person.prototype.name = "Tom";
Person.prototype.age = 18;
Person.prototype.sayName = function(){
  console.log(this.name);
}

var person1 = new Person();

console.log(person1.name);  //"Tom",来自原型
console.log(person1.hasOwnProperty("name"));  //false
console.log("name" in person1);  //true

person1.name = "Grey";
console.log(person1.name);  //"Grey",来自实例
console.log(person1.hasOwnProperty("name"));  //true
console.log("name" in person1);  //true
  • 从上面的例子可以看出,name属性要么直接在原型上访问到,要么直接在实例上访问到。
  • 调用"name" in person1始终都返回true
  • 当属性存在于实例中时,调用hasOwnProperty()返回true,存在于原型中时返回false。
  • 同时使用hasOwnProperty()和in操作符就可以知道属性是存在于原型中还是实例中了,如下所示:
function hasPrototypeProperty(object,name){
  return !object.hasOwnProperty(name) && (name in object);
}

由于in操作符只要通过对对象能够访问到属性就返回true,hasOwnProperty()只在属性存在于实例中时才会返回true,因此只要in操作符返回true而hasOwnProperty()返回false,就可以确定属性是原型中的属性。

unction Person(){
  
}

Person.prototype.name = "Tom";
Person.prototype.age = 18;
Person.prototype.sayName = function(){
  console.log(this.name);
}

var person = new Person();
console.log(hasPrototypeProperty(person,"name"))

person.name = "Grey";
console.log(hasPrototypeProperty(person,"name")) //true

function hasPrototypeProperty(object,name){
  return !object.hasOwnProperty(name) && (name in object);  //false
}

在使用for-in循环时,返回的时所有能够通过对象访问的、可枚举夫人属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。要取的对象上所有的可枚举的实例属性,可以使用Object.keys()方法。这个方法要接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。

function Person(){
  
}

Person.prototype.name = "Tom";
Person.prototype.age = 18;
Person.prototype.sayName = function(){
  console.log(this.name);
}

var keys = Object.keys(Person.prototype);
console.log(keys);  ["name", "age", "sayName"]

var person = new Person();
person.name = "Grey";
person.age = 20;
var keys1 = Object.keys(person);
console.log(keys1);  ["name", "age", "sayName"]

如果你想得到所有属性,无论它是否可枚举,都可以使用Object.getOwnPropertyNames()方法。

function Person(){
  
}

Person.prototype.name = "Tom";
Person.prototype.age = 18;
Person.prototype.sayName = function(){
  console.log(this.name);
}

var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);  //["constructor", "name", "age", "sayName"]

注意结果中包含了不可枚举的属性constructor属性。Object.keys()和Object.getOwnPropertyNames()方法都可以用来代替for-in循环。

相关文章

  • JS基础回归01:new操作符,原型和原型链

    本篇介绍 new 操作符的背后原理以及 JS 如何依赖原型形成原型链,完成继承。 new 操作符的本质 new 操...

  • 2018-11-26

    6.2.3 原型模式 1、理解原型对象 2、原型与in操作符 有两种方式使用in操作符:单独使用:in操作符会在通...

  • js原型与in操作符

    有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • (七)

    2、原型与in操作符有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过...

  • 6、面向对象的程序设计2(《JS高级》笔记)

    2、原型与in操作符有两种方式使用in操作符:单独使用和在for-in循环中使用。单独使用时,in操作符会在通过对...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 5-1 从基础知识到JSWebAPI

    回顾js基础知识 JS-web-API 总结 回顾js基础知识 变量类型和计算 原型和原型链 闭包与作用域 异步和...

  • 2019-12-12 第三章:几种简单的操作符 & 一点最近工作

    5.Boolean操作符 js中的布尔操作符与大多数其他语言类似。 ① 非:!代表非操作符。其操作逻辑是首...

网友评论

      本文标题:js原型与in操作符

      本文链接:https://www.haomeiwen.com/subject/pwsglxtx.html