美文网首页
JS原型的理解历程

JS原型的理解历程

作者: echo_me | 来源:发表于2017-03-30 11:29 被阅读21次

1.JS中对象的从属关系

JS必须在宿主环境中才能正常运行,而宿主环境一般都会为其提供一个全局对象。
web浏览器为JS提供的全局对象是window,所以JS中一切的对象和变量都是window的属性。
var a = 1; console.log( a ); //1 console.log(window.a); //1 console.log(this.a); //1

·构造函数和new

还是上代码吧,千言不如一码。
function a(){ this.name = 'echo'; //or name = 'echo'; } a(); console.log(name); // echo console.log(window.name);//echo
构造函数里面的东东都是window对象下的属性。这下明白为什么在构造函数里定义的变量如果不用var const let的话,该变量就是全局变量了吧,很神奇吧,这还不算神奇,神奇的还在后面。

让我们继续看吧。

function a(){ this.name = 'echo'; } var aa = a(); console.log(aa.name); //报错 console.log(name); // echo console.log(typeof aa); // undefined

function a(){ this.name = 'echo'; } var aa = new a(); console.log(aa.name); //echo console.log(name); // echo console.log(typeof aa); // object
以上代码我们可以看出new操作符在里面没干好事,具体干了什么呢?解释一下:
创建一个新对象 > 把构造函数里面的this指向该对象 > 执行函数,给该对象赋予属性和方法 > 返回对象

·构造器属性

当我们创建对象的时候,同时赋予该对象一个属性constructor,该属性是个指向创建该对象构造函数的引用。

function a(){ this.name = 'echo; } var b = new a(); console.log( b.constructor ); //function a(){ this.name = 'echo ' }

当然如果你通过对象文本标识创建的,该属性指向的是构造函数object()函数
`var o = {};
console.log( o.construtor ); //object(){}

原型和原型链

说到这个就重在理解了。先上一张美美的图吧。

QQ图片20170316143608.jpg

简单说一下:你的父亲(函数对象)一出来就立刻生了一个大儿子(prototype),你父亲给你大哥买了很多玩具,然后又生了你,你一出生,那爸爸就把他的玩具给了你(通过new),然后你大哥也把那些玩具给了你,同时他还有一份,你出生的同时,你又有一个大儿子,你又给他买了很多玩具,你又生了一个小儿子,你大儿子又把玩具给了你小儿子一份,同时你也把你的玩具都给你小儿子(通过new)。。。这就是“长兄如父啊!”,你的东西是从你大哥那来的,而连接你们的纽带就是(proto)。

相关文章

  • JS原型的理解历程

    1.JS中对象的从属关系 JS必须在宿主环境中才能正常运行,而宿主环境一般都会为其提供一个全局对象。web浏览器为...

  • 廖雪峰JS小记

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

  • JS原型

    最近一直在理解JS的原型------《你不知道的JS》--------《JS设计模式》 里面都讲JS的原型运作方式...

  • 前端资料

    ES6新数据类型 Symbol . js变量提升函数提升 js this js 原型及原型链理解 new做了什么 ...

  • 原型与新版的类-class

    首先来理解原型原型 === 共用属性可以先看看方姐的几篇文章:什么是JS原型链JS 中 proto 和 proto...

  • JS原型理解

    示例: ​总结如下:无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype...

  • JS原型理解

    原型链是整个JS面向对象的基础在理解原型链之前先来谈谈JS创建对象的几种方式 可以看到输出了4个对象,a1和a2看...

  • 2018-01-09 关于javascript原型链的思考 pl

    s 深入理解原型和原型链? 构造函数 理解原型和原型链 new的时候js都干了什么? 一个实现继承的demo 构造...

  • js原型链--js面向对象编程

    简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢...

  • JS的原型理解

    js的原型系统,主要包含以下三个基本元素 一、属性 prototype __ proto __ construct...

网友评论

      本文标题:JS原型的理解历程

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