自己的学习记录,写的短点可以以后短时间内理清一些疑惑,看前要求你至少了解js中关于原型链等基本概念,因为文章直接以总结的形式理出知识点,没有去解释一些基本的概念!

1.1、熟记两句话,预预热

  1. 函数既是函数也是对象,对象通过new关键字从函数中得来,函数自己创造了自己
  2. 对象中有一个未纳入规范的属性(指针)叫proto,函数中有一个属性(指针)叫prototype,proto姑且称它为隐式原型,prototype属性指向的叫原型对象

1.2、函数和对象初探

  1.其他语言中类是基本单位,Object类是所有类的基类。

  2.js中函数成了头等公民,因此在js中函数就是最基本的单位,而函数既是函数也是对象(本文开头),所以我们要分两种情况来探讨此处的“基类”了:Function函数是一个基函数,Object原型对象是所有原型对象的基对象。

1.3、函数和对象究竟谁先有谁?

  在其他语言中实例通过new一个类可以获得,也就是先有类后有对象,这时有些同学就有疑问了,楼主上边提到js的函数既是函数也是对象,对象又是从函数new出来滴,那么函数和对象究竟是谁先有的谁,也就是鸡生蛋还是蛋孵鸡的问题咯~。

  其实这两个问题压根就不应该放在一起来看,首先我们要深刻了解一个约定俗成的规定那就是“js的函数既是函数也是对象”(瞧瞧!开头的话是不是很重要?),这是基础定义。其次,让我们来看下new在js中的真正作用呗!new在其他语言中是实例化一个模板类,也就是类相当于模板是最初写好固定滴,而在js却非也,先来一句官方版的下定义,js中的new改变了this的指向,返回一个继承了该函数原型对象的新对象,this指向了新的实例,综上也就是实例化了一个继承构造函数原型对象的新对象咯,非也啊,不然我还写个毛毛啊~其实new除了上边的功能还做了另外一项伟大的工作叫做——“继承”,其会继承构造函数中带有this的属性。而且函数在js中是可以随时动态添加属性滴,也就是继承过来的属性也是动态习得的——动态继承!js函数本身就可以被当作对象使用。。。额,那要new干毛?当然是js的new比传统语言的多了一层“动态继承”的含义咯!so,其实使用new关键字以后就可以得到一个既有私有属性(来自于this)又继承了该函数原型链上的新对象。既然new有了新层次的作用,那么对象是new出来的,先有对象还是先有函数还会像其他语言中那么重要吗?我用new只是为了拿到最新的对象咯,我用new只是为了更好的封装(私有和公有)一个对象咯,我不用new我照样也会有对象滴,滋滋~~如果你依旧要寻找答案,其实我已经回答了,函数既是函数也是对象他们两个是并列存在的,只是函数和对象在js中的分工作用不同罢了,那他们的具体作用是啥腻?以及到底谁先有谁呢?第二个思路请强迫症的往下瞧瞧吧!

  对new补充:new类似于一个工厂设计模式,其内部通过apply等方法调用了构造函数从而改变其this的指向,获得构造中属于自己的私有属性,并且将自身的__proto__指向构造函数的prototype属性,最后返回这个对象,所以就会造成既私有又“继承”咯!

1.4、聊聊js“本身”中函数和对象的具体作用

  一句话:函数搞一搞私有和封装,对象玩一玩原型链和继承 

  1.其他语言类是基本单位,继承依靠在类中写extends关键字,是类与类之间的单继承

  2.js中函数是基本单位,继承的方式之一是依靠原型链,是?与?之间?“继承”呢?

  so,我们来推敲下吧,原型链上都有啥?嗯对了,原型链上全是对象,其开始可能是某个实例对象,其终点是null(注意:是通常情况下),现在我们是不是就可以将传统语言的类继承说成是js中的对象继承咯?现在有了开篇两句话的基础和我上边的解释我们就不难得出如下推敲了:  
  
  函数方面:函数的prototype——>Object.prototype——>null 

  对象方面:它的proto指针——>构造函数的.prototype——>Function.prototype——>Object.prototype——>null

  答疑:js中函数是基本单位,继承的方式之一是依靠原型链,是原型对象与原型对象之间单继承!那js能实现多继承否?我都提出来了,那你就猜猜呗!

  综上,函数和对象是个啥子关系咯?纵观全文我们发现其“始终如一”啊~函数即是函数也是对象其为始,同时指向了null其为终,现在你还会不会纠结函数和对象谁先有谁咯?

聊聊传统oo和js的某些对比——对象/函数/new关键字等的更多相关文章

  1. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  2. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  3. JS入门之ActiveXObject对象(转载)

    JS入门之ActiveXObject对象   此对象提供自动化对象的接口.   function ActiveXObject(ProgID : String [, location : String] ...

  4. js中的json对象详细介绍

    JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...

  5. [Javascript] js的类和对象

    类 graph LR 类-->构造函数 类-->prototype对象 类-->instanceof运算符 类-->constructor属性 类-->isPrototy ...

  6. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  7. JS面向对象设计-理解对象

    不同于其他面向对象语言(OO,Object-Oriented),JS的ECMAScript没有类的概念, 它把对象定义为"无序属性(基本值.对象.函数)的集合",类似于散列表. 每 ...

  8. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  9. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

随机推荐

  1. android打电话的小程序

    主要使用了Intent以及uses-permission标签. call.rar 下载后直接导入项目

  2. Qt 改变图片大小

    void Setting_TabProduct::changeImageSize(int width,int height,QString imgFile) { QPixmap pixmap(imgF ...

  3. 18. javacript高级程序设计-JavaScript与XML

    1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript ...

  4. 警告: 程序集绑定日志记录被关闭(IIS7 64位系统)

    部署一个.NET程序在IIS7服务器,出现如下信息: 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: S ...

  5. Apache OFBiz 研究记录01

    作为Apache 的顶级项目: Apache OFBiz,功能十分强大,一般开发者很难用到全部功能. 这次笔者的研究主要集中在电子商务平台这一块,一步一步解构. OFBiz下载地址:http://of ...

  6. Django~static files

    such as images, JavaScript, or CSS https://docs.djangoproject.com/en/1.9/howto/static-files/ django. ...

  7. UVALive 4953 Wormly--【提醒自己看题要仔细】

    有一条虫要过桥,桥有断的木板和好的木板.虫有L条腿B个身体,桥长N.01串表示桥的好坏.输出最少操作次数. 一开始虫的身体在最左B桥上,腿在最左L桥上,最后要到达最右B以及最右L... 操作有2种:① ...

  8. codeforces 591A. Wizards' Duel 解题报告

    题目链接:http://codeforces.com/problemset/problem/591/A 题目意思:其实看下面这幅图就知道题意了,就是Harry 和 He-Who-Must-Not-Be ...

  9. 【python】入门学习(九)

    面向对象编程 class 定义类,类的值可以修改 _ _init_ _(self) 初始化函数,创建类时自动调用 self 指向对象本身,可以用其他的名字 但不建议 #person.py class ...

  10. 【python】类中的super().__init__()

    来源:百度知道 python中的super( test, self).__init__()是什么意思? 首先找到test的父类(比如是类A),然后把类test的对象self转换为类A的对象,然后&qu ...