我们知道javascript里定义一个普通对象的方法,如:

let obj = {};
obj.num = 1;
obj.string = 'string';
obj.func = function(){alert('func')};
obj.arr = ['x','y'];
console.log(obj.num); //
console.log(obj.string); // "string"
console.log(obj.func); //function(){alert('func')}
console.log(obj.arr); //["x", "y"]

或是:

let obj = {
num: 1,
string: 'string',
func: function() {alert('func')},
arr: ['x', 'y']
}

构造函数方式:

function animal() {
this.name = 'animal';
}
let obj = new animal();
console.log(obj.name); //"animal"

等等。

不过每个对象都有它所对应的原型属性,譬如我们给一个对象添加原型属性:

function animal() {
animal.prototype.name = 'animal';
animal.prototype.x = 1;
}
let obj = new animal();
obj.x = 10;
console.log(obj.name); //'animal'
console.log(obj.x); //
console.log(animal.prototype.x) //

上面我们给animal对象原型上添加了name和x属性,在下面 new 一个新的构造函数obj时,它本身是继承animal对象的,所以我们能找到obj里面的name属性值,不过obj一旦给animal已有属性 'x' 重新赋值为10的时候,这时候x的值就改变了,但是animal原型上的 'x' 值是没变的,原因是obj里的属性是优先找它自己里面有定义的属性,如果找不到,就会去它的原型链上找,也就是animal。

我们再来看下案例:

console.log(typeof obj.toString) // "function"
console.log('name' in obj) //true ‘in`关键字也会找到它的原型链上去,所以name是存在的
console.log(obj.hasOwnProperty('x')) // true
console.log(obj.hasOwnProperty('name')) //false

为什么obj对象和animal对象我们刚刚都没有定义toString方法,那这个toString方法是哪里来的?这也是一个优先级的问题,它会从obj开始一直向上查找,直到找到这个属性为止,如果没有将会返回undefined,而每个Object对象原型里里默认有toString方法的。hasOwnProperty()方法是用来判断一个对象是否有你给出名称的属性或对象,它使用来判断当前对象,而无法判断当前对象的原型链上的属性是否存在,因为obj没有定义name属性,所有返回false。

再介绍另外一个继承对象原型链的方法:

let cat = new Object({
name: 'cat',
y:100
}); let obj = Object.create(cat);
obj.x = 1;
console.log(obj.hasOwnProperty('x')) //true
console.log(obj.hasOwnProperty('y')) //false
console.log(obj.name) //cat
console.log(obj.y) //

javascript 创建对象及对象原型链属性介绍的更多相关文章

  1. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  2. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  3. react-native-pg-utils(对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.)

    react-native-pg-utils 对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法. 每次新建react-native项目之后都会发现有一些很常用的方法在这 ...

  4. 再访JavaScript对象(原型链和闭包)

    一:原型链简介 JavaScript通常被描述为基于原型的语言 (从继承机制的角度)- 为了提供继承,对象(注意:区别于实例)可以拥有一个原型对象,它充当一个模板对象,它继承了方法和属性.对象的原型对 ...

  5. JavaScript对象原型链的学习

    1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...

  6. [js高手之路]一步步图解javascript的原型(prototype)对象,原型链

    我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...

  7. JavaScript创建对象及对象继承

    面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同.实际上,JavaSc ...

  8. JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包

    了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...

  9. javascript精髓篇之原型链维护和继承.

    一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...

随机推荐

  1. 企业级搜索引擎Solr 第三章 索引数据(Indexing Data)[2]--DIH

    转载:http://quweiprotoss.wap.blog.163.com/w2/ DIH需要在solrconfig.xml中注册,如下: <requestHandler name=&quo ...

  2. IOS 关于ipad iphone5s崩溃 解决

    之前 我这一直没有以上两款测试机  于是发布被退回了.说是这两款 开启动就崩. 这种情况下 解决办法只有一个,就是bug重现,不然,你根本无法确定再一次提交是否是安全的.所以我借了一台 iPad mi ...

  3. ZBarSDK扫描二维码

    1:如果报引用文件错误的话需要在设置一下:project->Build settings->build active architecture only选项设置为No.Valid Arch ...

  4. 【Android 界面效果21】Android ViewPager使用详解

    这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...

  5. iOS - UI - UISwitch

    UISwitch //开关    不用设置宽高  有默认宽高 UISwitch * sw = [[UISwitch alloc] initWithFrame:CGRectMake(100, 100,  ...

  6. Django升级1.6之后出现“Bad Request (400)”错误的解决方案

    Django从1.4升级到1.6之后发现之前的网站都无法访问了,会出现“Bad Request (400)”的错误,搜了半天终于找到了解决办法. 解决方法很简单: 在settings.py里面添加: ...

  7. 10 个顶级 JavaScript 动画框架推荐

    使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现.本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果.1. RaphaëlRaphaë ...

  8. SpringData JPA详解

    Spring Data JPA 1.    概述 Spring JPA通过为用户统一创建和销毁EntityManager,进行事务管理,简化JPA的配置等使用户的开发更加简便. Spring Data ...

  9. 剑指Offer11 在O(1)内删除链表结点

    /************************************************************************* > File Name: 11_Delete ...

  10. Macbook之用brew安装Python

    1. brew install python 2.If you don't have ~/.bash_profile, add ~/.bash_profile by touch ~/.bash_pro ...