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
