this_原型链_继承

this部分链接

原型链相关问题

问题7:有如下代码,解释Person、 prototype、proto、p、constructor之间的关联。

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

如图:

Paste_Image.png

1.Person是一个构造函数,也是一个对象,通过new方法可以创建新的实例。例子中,变量p就是通过Person()创建的一个实例。
2.prototype是原型对象,每个函数都有这个属性。原型对象默认有constructor__proto__两个属性;
prototype属性实现继承机制:这个原型对象中存有的属性和方法,通过构造函数创建的每一个实例,都可以访问到这些属性和方法。
3.__proto__是每个对象都拥有的属性,它指向创建该对象的构造函数的原型。例子中,p.__proto__ === Person.prototype
所以当调用p.sayName 的时候p先查找自己的属性中有没有,没有就在原型链中查找。
4.constructor是每个函数的原型对象中都含有的属性,它指向构造函数本身。

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

如图

Paste_Image.png

  • toString()从哪里来?
    toString()实际上是Object的方法。
    首先p对象在自己身上找toString(),没有然后到p.__proto__指向的原型
    对象里面找,没有然后到原型对象里__proto__指向的原型对象里面找,最后在Object.prototype对象里就找到了toString();

  • 什么是原型链?
    每个对象都有一个默认的__proto__属性,这个属性就是对其父元素原型对象(protoType)的引用。由于原型对象本身也是对象,也有 __proto__属性,它的__proto__属性又指向了其更高父元素原型对象。这样就形成了一条链,这就是原型链。
    例如:图中通过__proto__连接起来的链就叫做原型链。

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

//to do
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

代码如下

String.prototype.getMostOften=function(){

    var obj={};
    for(var i=0;i<this.length;i++){
        var p=this[i];
        //console.log( this==str ); //this指的是str字符串对象
        if(!obj[p]){
            obj[p]=1; //如果是属性值为undefind,然后设置值为1
        }else{
            obj[p]++ //如果属性值不为undefined,那么就再加1
        }
    }
    console.log(obj); 

    //遍历对象,找到出现次数最多的
    var max=0;
    var val;
    for(var key in obj){
        if( obj[key]>max ){
            max=obj[key];
            val=key
        }
    }
    return '因为'+val+'出现了'+max+'次';

}

var str="ahbbccdeddddfg";
var ch=str.getMostOften();
console.log(ch);  //d , 因为d 出现了5次
Paste_Image.png

问题10: instanceOf有什么作用?内部逻辑是如何实现的?

instanceOf判断一个对象是否是某个构造函数的实例,通过检测某个构造函数的原型是否存在于要检测的对象的原型链上。

function a(){};
var b=new a();
b instanceof a; //打印true
b instanceof Function; //打印false
b instanceof Object;  //打印true 

首先调用p.__proto__,看其与所要对比的函数的prototype是否相同,即a.prototype。如果不同,则继续调用p.__proto__.__proto__.直到调用至原型链最底层。如果p._proto__的原型链上出现了所要对比的函数的prototype,便停止查找,并返回true,否则返回false。

继承相关问题

问题11:继承有什么作用?

继承的作用就是让子类能获得父类的方法和属性,提高代码的复用性。在父类的基础上,自己可以扩展新的属性和方法。

问题12: 下面两种写法有什么区别?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饥人谷', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);
  • 方法1中p1对象里面有name,sex,printName三个属性
  • 方法2中p1对象里面有name,sex两个属性,printName方法绑定在其父类Person的prototype属性下,p1可以继承父类的属性和方法,所以可以调用p1.printName。

问题13: Object.create 有什么作用?兼容性如何?

作用:
Object.create(proto, [ propertiesObject ]):创建一个具有指定原型且可选择性地包含指定属性的对象。
proto:一个对象,作为新创建对象的原型。或者为 null。第二个参数是对象的属性描述符,这个参数是可选的。

例如

function Person(name){
    this.name=name;
}
Person.prototype.sayName=function(){
    console.log('My name is :' + this.name);
    console.log( this===p1 );
}

function Student(name,age){
    Person.call(this,name); //这里是继承Person里的属性
    this.age=age;
    // console.log(this);
}

Student.prototype=Object.create(Person.prototype); //这里是继承Person原型里的方法
Student.prototype.constructor=Student; //将Student里新对象中设置constructor为本身
Student.prototype.sayAge=function(){  //将Student里新对象中设置属性sayAge
    console.log(this.age);
}

var p1 = new Student('hunger',20);
console.log(p1);
p1.sayName();
p1.sayAge();
Paste_Image.png
  • 通过Object.create()方法,让Student.prototype指向Person.prototype,继承它的printName方法。
  • 对Student.prototype进行修改不会影响到原来Person.prototype的属性和方法。

兼容性:

Paste_Image.png

问题14: hasOwnProperty有什么作用? 如何使用?

  • hasOwnProperty方法会返回一个布尔值,其用来判断某个对象是否含有特定的自身属性,该方法会忽略掉那些从原型链上继承到的属性。
  • 语法为obj.hasOwnProperty(prop),参数prop为要检测的属性。

例如

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName=function(){
    console.log(this.name);
}
var p1 = new Person('hunger',100);

console.log( p1.hasOwnProperty('name') ); //打印出true  因为属性name存在于实例中
console.log( p1.hasOwnProperty('sayName') );  //打印出false  因为属性是从prototype中继承的

问题15:如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}
  • 这里的 call 指定了Person函数执行的环境。在Male作用域下执行Person函数。此时Person函数中的this,就指向Male函数中的this。
    Male(name,sex,age)中的name和sex则是传递给Person的参数。
  • 通过这种方式就实现了属性的继承。

问题16: 补全代码,实现继承

function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

代码如下

function Person(name,sex){
    this.name=name;
    this.sex=sex;
}
Person.prototype.getName=function(){
    console.log(this.name);
    //console.log(this);
}

function Male(name,sex,age){
    Person.call(this,name,sex);
    this.age=age;
}

Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.getAge=function(){
    console.log(this.age);
}

var ruoyu = new Male('若愚','男',27);
console.log(ruoyu);
ruoyu.getName();
Paste_Image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容