this-原型链-继承

作者: GaoYangTongXue丶 | 来源:发表于2017-04-07 21:28 被阅读16次

继承-原型链-作用域-this-闭包-生命周期-垃圾回收机制
this-原型链-继承
this-原型链-继承
this-原型链-继承
this-原型链-继承
this-原型链-继承
this-原型链
继承
js中的实现继承的几种方式
JavaScript 原型、原型链与原型继承

this 相关问题

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

作用：
给fun函数指定this和参数
apply的语法：
fun.apply(thisArg[, argsArray])
call的语法：
fun.apply(thisArg[, arg1[, arg2[, ...])
bind:
fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
在fun函数运行时指定的this值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
argsArray
一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。
arg1, arg2, ...
指定的参数列表。
区别：
apply函数的语法与call的语法几乎完全相同，唯一的区别在于，call方法接受的是一个参数列表，而apply方法接受的是一个包含多个参数的数组（或类数组对象）。bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。

问题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)
}
//this 指window  所以输出window

问题4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//第一个this 输出document 
//第二个this 输出window

问题5：下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
//因为使用了call指定了this ，所以this 是john，输出John

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
//由于this 是$btn，没有showMsg这个方法，会报错
//修改:
var module= {
  bind: function(){
   _this = this //把this即module赋值给_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 == p.__proto__,
    Person.__proto__ == Object,
    p.__proto__.constructor == Person,
    Person.prototype.__proto__ == Object.prototype,
    Object.prototype.constructor == Object,
    Object.prototype.__proto__ == null
*/

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

toString是p._ptoto_._proto_所拥有的方法
每个对象上都有一个__proto__属性，这个属性会指向该对象的原型对象，而原型对象也会有这个__proto__属性指向自己的原型对象，这种关系直到指向Object对象为null，这个链条式的关系就是原型链。
在调用对象的属性和方法时，首先在该对象自己身上找，然后再上原型链上寻找，直到找到合适的为止，如果找到null还未找到就会报错。

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

var str = 'ahbbccdeddddfg';
        String.prototype.getMostOften = function(){
            
            var obj={};
            for(var i=0;i<this.length;i++){
                var name = this[i]
                if(!obj[name]){
                  obj[name] = 1
                }else{
                  obj[name]++
                }
               
            }
           var maxCount = 0;
           var maxEle;
            for(var key in obj){
                if(obj[key]>maxCount){
                    maxEle = key;
                    maxCount = obj[key]
                }
            }
            return maxEle;
        }
        var ch = str.getMostOften();
        console.log(ch); //d , 因为d 出现了5次

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

作用是判断一个对象是不是由一个构造函数创建的。
内部逻辑：顺着对象的原型连一直往上找,若原型链上的某一个__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把printName方法定义在构造函数本身中，方法2把printName方法定义在构造函数的原型中。方法1每次实例化对象都要添加这个属性，方法2把通用的方法写在原型对象中，每一个实例都能去引用该方法，节约了空间。

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

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法：Object.create(proto, [ propertiesObject ])这是ES5的语法，支持ES5的浏览器才支持这么用。

问题14： hasOwnProperty有什么作用？如何使用？

hasOwnProperty()可以用来检测一个对象是否含有特定的自身属性,该方法会忽略掉那些从原型链上继承到的属性。
用法：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;
}
指定Person中的this是Male，所以Male就有了name，age属性

问题16：补全代码，实现继承

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

        Person.prototype.getName = function () {
            // todo ...
            return this.name;
        };
        function Male(name, sex, age) {
            //todo ...
            Person.call(this, name, sex);
            this.age = age;
        }

        //todo ...
        Male.prototype = Object.create(Person.prototype)
        Male.prototype.getAge = function () {
            //todo ...
            return this.age;
        };

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