美文网首页
前端基础(问答27)

前端基础(问答27)

作者: 郑哲明 | 来源:发表于2016-09-07 17:41 被阅读52次

keywords: 原型链。


  • 有如下代码,解释Personprototype__proto__pconstructor之间的关联。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();

1、Person是p的构造函数,p是Person的实例;
2、prototype是Person的原型对象,p的__proto__指向该原型对象;
3、constructor是prototype的属性,指向p的构造函数Person;

  • 上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

p的__proto__指向Person.prototype,该prototype的__proto指向Object.prototype。toString正式Object.prototype中的方法。

Person-p原型图

每一个对象都有自己的原型(即__proto__),而原型(prototype)本身也是对象,因而形成了一条原型链;比如a是b的原型,b是c的原型,以此类推。这就是原型链

  • 对String做扩展,实现如下方式获取字符串中频率最高的字符

String.prototype.getMostOften = function () {
    var getArr = this.split('').sort().join('').match(/(.)\1*/g).sort(function(a,b) {
        return a.length - b.length
    })
    return getArr.pop()[0]
}

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
  • instanceOf有什么作用?内部逻辑是如何实现的?

instanceof运算符返回一个布尔值,表示指定对象是否为某个构造函数的实例。常用于判断值的类型:

var x = [1, 2, 3];
var y = {};
x instanceof Array // true
y instanceof Object // true


实质是检查右边构造函数的原型对象(Function.prototype)是否在左边对象的原型链(__proto__)上。内部逻辑可以用下面的函数表达:

 function isObjInstanceOffunc(obj,func) {
  var __proto__=obj.__proto__;
  do{
    if(__proto__===func.prototype) return true;
  }while(__proto__=__proto__.proto__)
  return false;
}

参考资料:
instance

相关文章

  • 前端基础(问答27)

    keywords: 原型链。 有如下代码,解释Person、 prototype、__proto__、p、cons...

  • 前端基础(问答4)

    keywords:三种列表,语义化,class与id,行内元素(inline elements),块级元素(blo...

  • 前端基础(问答5)

    keywords:选择器、优先级、class与id、命名空间、伪类。 CSS选择器常见的有几种? 常见的CSS选择...

  • 前端基础(问答7)

    keywords: 定位、浮动、布局、文档流、负margin。 文档流的概念指什么?有哪种方式可以让元素脱离文档流...

  • 前端基础(问答11)

    keywords: 白屏、FOUC、asyns、defer、渲染机制、JavaScript数据类型、。 CSS和J...

  • 前端基础(问答19)

    keywords: Ajax。 Ajax是什么?有什么用? Ajax = Asynchronous JavaScr...

  • 前端基础(问答12)

    keywords:函数声明、函数表达式、声明前置、argument、重载、作用域链 函数声明和函数表达式有什么区别...

  • 前端基础(问答13)

    keywords: 数组读写、字符串转化数组、数组转字符串、函数、数学函数、随机数、ES5数组、排序。 数组方法里...

  • 前端基础(问答14)

    keywords: 数组读写、字符串转化数组、数组转字符串、函数、数学函数、随机数、ES5数组、排序。 问题 基础...

  • 前端基础(问答9)

    keywords: 负边距、relative、三栏布局、圣杯布局、双飞翼布局。 负边距在让元素产生偏移时和posi...

网友评论

      本文标题:前端基础(问答27)

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