this_原型链_继承

this 相关问题

1、apply、call 、bind有什么作用，什么区别

• call方法：
  语法：call(thisObj, arg1, arg2…)
  定义：调用一个对象的方法，以另一个对象替换当前对象。
  说明：call方法可以代替一个对象调用一个方法，call方法可将一个函数的对象上下文从初始的上下文改变由thisObj指向的新对象。如果没有提供thisObj参数，那么全局对象被作为thisObj。

• apply方法：
  语法：apply(thisObj, [arg1, arg2…])
  定义：应用某个对象的一个方法，用另一个对象替换当前对象。
  说明：如果arrArray不是一个有效的数组或者不是arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么全局对象将用做thisObj，并且无法被传递任何参数。
• bind方法：
  语法：bind(thisObj, arg1, arg2…)
  定义：调用一个对象的方法，以另一个对象替换当前对象。
  说明：bind方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的this， 之后的一序列参数将会在传递的实参前传入作为它的参数。如果没有提供thisObj参数，那么全局对象被作为thisObj。
• 区别：
• 都是用来改变函数的this对象的指向的；
• 第一个参数都是this要指向的对象；
• 都可以利用后续参数传参；
• call方法接收参数列表，而apply方法接收参数数组；bind是返回对应函数，便于稍后调用，apply、call是立即调用；

2、以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
// this指向john对象，输出John:hi!

3、下面代码输出什么，为什么？

func() 
function func() { 
  alert(this)
}
// 因为在函数func()被直接调用时，this绑定到全局对象。在浏览器中，window 就是该全局对象。

4、下面代码输出什么？

document.addEventListener('click', function(e){
    console.log(this);    //  输出document对象,点击页面，控制台输出document。绑定事件函数时，this表示触发此事件的DOM对象。
setTimeout(function(){
    console.log(this);     //  输出window对象,setTimeout、setInterval这两个方法执行的函数this也是全局对象
   }, 200);
}, false);

5、下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
// func()函数通过call()函数调用，此时this代表John对象，john.firstName存在，输出"John"

6、以下代码有什么问题，如何修改

// 修改前
var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指什么  //这里的this指的是触发此事件的DOM对象，不是module。
      this.showMsg();  ////由于this是$btn，所以在执行这句是会报错。
    })
 },

  showMsg: function(){
   console.log('饥人谷');
  }
}

// 修改后
var module= {
  bind: function(){
    var _this = this
    $btn.on('click', function(){
      console.log(this)   
      _this.showMsg();  
    })
 },

  showMsg: function(){
   console.log('饥人谷');
  }
}

原型链

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();

• 构造函数Person的prototype对象自带constructor属性指向构造器Person

• 构造函数Person的prototype定义了sayName方法
• new一个Person输入实参生成一个实例对象p
• p的__proto__属性指向构造函数Person的prototype
• p.sayName()先在自身的的方法里找，没有再寻着原型链往上找。

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

• toString是对象p继承的Object对象的方法。

• 什么是原型链?
  JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候，如果对象本身没有找到这个属性，就会沿着原型链一层一层的寻找。

Paste_Image.png

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

// 原代码
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);
// 扩展
    var Str = function(str){
      this.str = str
      // this.getMostOften()
    }
    Str.prototype.getMostOften = function(){
      var obj = {}
      var maxValue = ''
      var maxNum = 0
      for (var i = 0; i < this.str.length; i++) {
        var j = this.str[i]
        if (!obj[j]) {
          obj[j] = 1
        } else if(obj[j]) {
          obj[j]++
        }
      }
      for(key in obj){
        if (obj[key]>maxNum) {
          maxValue = key
          maxNum = obj[key]
        }

      }
      return '出现频率最高的字符是：' + maxValue + '，共计' + maxNum + '次。'        
    }
    var str = new Str('ahbbccdeddddfg')
    ch = str.getMostOften()
    ch
    console.log(ch) // 出现频率最高的字符是：d，共计5次。

10、instanceOf有什么作用？内部逻辑是如何实现的？

• instanceof运算符用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上。即检测是否是另一个对象的实例。

• 内部逻辑：顺着对象的原型链一直往上找,若原型链上的某一__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);

• 方法一printName这个方法作为构造函数方法,在创建P1实例的时候相当于又重新拷贝了一个printName方法.

• 方法二printName这个方法作为原型链方法,创建P1实例的时候相当于借用原型的printName方法.
• 推荐使用第二种。方法2把通用的方法写在原型对象中，每一个实例都能去引用该方法，节约了空间。

13、Object.create 有什么作用？兼容性如何？

• Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象，
  他的语法为：Object.create(proto, [ propertiesObject ])
  参数：
  Object：一个对象，作为新创建对象的原型。或者为 null
  propertiiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。

• 兼容性

14、hasOwnProperty有什么作用？ 如何使用？

• hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一 一个处理属性但是不查找原型链的函数。

• 用法：obj.hasOwnProperty(prop) // prop为要检测的属性

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;
}
// this的指向为 Male ,让 Male 继承 Person 的属性

16、补全代码，实现继承

    function Person(name, sex){
      this.name = name
      this.sex = sex
    }

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

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

    //Male.prototype.__proto__ = Person.prototype
    // function fn(){}
    // fn.prototype = Person.prototype
    // var Male.prototype = new fn()
    Male.prototype = Object.create(Person.prototype)
    Male.prototype.constructor = Male
    Male.prototype.getAge = function(){
      console.log(this.name)
    };

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