资讯专栏INFORMATION COLUMN

JS基础 -构造函数与原型、原型链 Part two

lucas / 2127人阅读

摘要:构造函数构造函数名大写即使不写,构造函数也默认返回,最好不写创建实例执行过程变成空对象属性赋值赋值给扩展引用类型都有构造函数本质是的语法糖判断引用类型属于哪个构造函数,例判断逻辑的一层一层向上找,能否对应到原型规则以下所说的引用类型均指对象

1.构造函数:

</>复制代码

  1. function Foo(name,age){// Foo构造函数名大写
  2. this.name =name;
  3. this.age = age;
  4. // return this; //即使不写,构造函数也默认返回this,最好不写
  5. }
  6. var f = new Foo("lala",12);//创建实例
  7. (执行过程:(1this 变成空对象
  8. (2)属性赋值
  9. 3return this 赋值给 f

扩展:引用类型都有构造函数

</>复制代码

  1. var obj = {} //本质是 var obj = new Object() 的语法糖
  2. var arr = [] // var arr = new Array()
  3. function Foo(){...} //var Foo = new Function(...)
  4. instanceof判断引用类型属于哪个构造函数,例: f instanceof Foo;判断逻辑:f的_proto_,一层一层向上找,能否对应到 Foo.prototype)

2.原型规则

</>复制代码

  1. 以下所说的引用类型均指(对象、数组、函数,不包括null
  2. (1)所有引用类型,均可自由扩展属性(具有对象特性)
  3. (2)所有引用类型,均有一个隐式原型属性(_proto_属性),属性值是一个普通对象
  4. 3)只有所有函数,均有一个显示原型属性(prototype属性),属性值是一个普通对象
  5. 4)所有引用类型,_proto_属性值 指向它的构造函数的 prototype属性值
  6. (obj._proto_ === Object.prototype)
  7. (5)当想要得到一个引用类型的某一属性时,如果其本身不具有该属性,则会去它的_proto_(即它的构造函数的 prototype)中寻找

知识补充:

</>复制代码

  1. 1.通过对象属性形式执行函数(例:obj.del()),this 指向对象本身
  2. 2.for(item in obj){ // for in在大多数浏览器屏蔽了来自原型的属性
  3. if(obj.hasOwnProperty(item)){} //建议加上判断
  4. }

3.原型链

相关问题:

</>复制代码

  1. 1.原型链继承的例子-封装DOM查询:
  2. function Elem(id){ //构造函数
  3. this.elem = document.getElementById(id)
  4. }
  5. Elem.prototype.html = funcion(val){
  6. var elem = this.elem;
  7. if(val){
  8. elem.innerHtml = val;
  9. // return this //最好不写 (链式操作)
  10. }else{
  11. rerurn elem.innerHtml
  12. }
  13. }
  14. Elem.prototype.on = funcion(type,fn){
  15. var elem = this.elem;
  16. elem.addEventListener(type,fn); //addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件
  17. }
  18. var div = new Elem("XXX");
  19. div.html("

    明天你好

    ").on("click",function(){ //链式调用

  20. alert("Hello World")
  21. });
  22. 2.描述new对象的过程:
  23. (1)创建一个新对象;
  24. 2this 指向这个新对象;
  25. 3)执行代码(this 赋值);
  26. 4)返回 this

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95038.html

相关文章

  • Vue 2 | Part 7 组件

    摘要:因为这里会举一连串的例子,就直接用来作为组件名称了。这是一个组件名称定义的时候有一点需要注意的,就是要使用中划线分词。在组件的方法里面返回数据就可以了。在的组件中间定义的内容,就会被插入到的位置中去。敬请期待下一期,组件通信。 界面写多了,大家应该都会想到一个问题:JS的模块写好以后可以在多个地方重复使用,HTML有没有办法做到呢?Vue给了我们这个能力,使用组件,就可以轻松做到。 最...

    xcold 评论0 收藏0
  • LeetCode刷题——29. Divide Two Integers(Part 2靠大家)

    摘要:上篇文章写了以我自己的思路来解决这个问题,但是运行时间过长,看了上的高效写法是使用位运算的解法,当初我自己写这个问题是也想到了可以用位运算快一点,但是因为基础差,对位运算的掌握不牢靠,还是选择使用了减法的思路,在此将上高效解法做一个思路分析 上篇文章写了以我自己的思路来解决这个问题,但是运行时间过长,看了leetcode 上的高效写法是使用位运算的解法,当初我自己写这个问题是也想到了可...

    JouyPub 评论0 收藏0
  • [LeetCode] 482. License Key Formatting

    Problem You are given a license key represented as a string S which consists only alphanumeric character and dashes. The string is separated into N+1 groups by N dashes. Given a number K, we would wan...

    codercao 评论0 收藏0
  • [CS101] Programming Languages and OOP 编程语言及面向对象基础

    摘要:编程语言及面向对象基础题 编程语言及面向对象基础题 Design Pattern What is singleton? Whats its cons and pros? How to implement it?Definition: Singleton pattern is a design pattern that ensure that only one instance of a...

    Drinkey 评论0 收藏0

发表评论

0条评论

lucas

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<