this
问题1： apply、call 、bind有什么作用，什么区别
-
call 和 apply 都是为了改变某个函数运行时的上下（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向
第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组
func.call(this, arg1, arg2); func.apply(this, [arg1, arg2]) -
bind
bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数
var foo = {
bar : 1,
eventBind: function(){
var _this = this;
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}
区别是:当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。
总结一下：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
参考
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //输出:John:hi!
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)//输出 [object window],因为在函数被直接调用时this绑定到全局对象,在浏览器中，window 就是该全局对象
}
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);//document
setTimeout(function(){
console.log(this);//window:setTimeout里的this指向window
}, 200);
}, false);
问题5：下面代码输出什么,为什么
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)//John因为func.call(john)的this就是第一个参数john
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指$btn
this.showMsg();
})
},
showMsg: function(){
console.log('hunger');
}
}
问题
//在事件处理程序中this代表事件源DOM对象，所以该处的this指向$btn
//this.showMsg() 同理这里的this指向$btn,所以这里会出错，因为$btn中没有showMsg()方法应该为如下
修改后:
var module= {
bind: function(){
var that = this;//引用this
$btn.on('click', function(){
console.log(that)
that.showMsg();//this为module
})
},
showMsg: function(){
console.log('hunger');
}
}
原型链相关问题
问题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，p是Person类的实例，有一个内部属性_proto_,
他指向类的prototype，p._proto_.constructor指向构造函数Person。
8.上例中
1.对象 p可以这样调用p.toString(),toString是哪里来
image.png
2.画出原型图
image.png
3.解释原型链
首先来说说prototype属性:不像每个对象都有proto属性来标识自己所继承的原型，只有函数才有prototype属性。
JS不像其它面向对象的语言，它没有类（class，ES6引进了这个关键字）的概念。JS通过函数来模拟类。
当你创建函数时，JS会为这个函数自动添加prototype属性，值是空对象。而一旦你把这个函数当作构造函数（constructor）调用（即通过new关键字调用），那么JS就会帮你创建该构造函数的实例，实例继承构造函数prototype的所有属性和方法（实例通过设置自己的proto指向承构造函数的prototype来实现这种继承）。
JS正是通过proto和prototype的合作实现了原型链，以及对象的继承。
构造函数，通过prototype来存储要共享的属性和方法，也可以设置prototype指向现存的对象来继承该对象。
对象的proto指向自己构造函数的prototype。obj.proto.proto...的原型链由此产生
two = new Object()中Object是构造函数，所以two.proto就是Object.prototype。ES规范定义对象字面量的原型就是Object.prototype。
我们知道JS是单继承的，Object.prototype是原型链的顶端，所有对象从它继承了包括toString等等方法和属性。
Object本身是构造函数，继承了Function.prototype;Function也是对象，继承了Object.prototype
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
法1:遍历
String.prototype.getMostOften = function(){
var arr = [];
for(var i=0;i<this.length;i++){
if(arr[this[i]]){
++arr[this[i]];
}else{
arr[this[i]] = 1;//必须在这里赋值为1
}
}
var count = 0;
var maxKey;
for(var key in arr){
if(arr[key]>count){
count = arr[key];//数字
maxKey = key;//a,b..
}
}
var maxCount = count;
return maxKey+':因为'+maxKey+' 出现了'+maxCount+'次';
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
检查元素__console.log
法2:正则
String.prototype.getMostOften= function(str){
return str.split('').sort().join('').match(/(\S)\1*/g).sort(function(a,b){
return b.length - a.length;
})[0][0];
};
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften(str);
var length = str.split('').sort().join('').match(/(\S)\1*/g).sort(function(a,b){
return b.length - a.length;
})[0].length;
console.log(ch+':因为'+ch+'出现了'+length+'次'); //d , 因为d 出现了5次
sort() 方法用于对数组的元素进行排序,是按照字符编码的顺序进行排序
\S 匹配任何非空白字符
\1 指定第一个子匹配项
* 匹配前面的子表达式零次或多次
console.log
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
-
instanceof用于判断某个变量是否是某个对象的实例，返回值为true或false
-
instanceof
通过探测obj.proto.proto... === Constructor.prototype来验证obj是否是Constructor的实例。
:对象的proto属性,一直往下查proto属性是不是等于构造函数的prototype属性
继承相关问题
问题11：继承有什么作用?
- 继承是指一个对象直接使用另一对象的属性和方法。可以提高复用性,省代码
- 作用：继承划分了类的层次性，父类代表的是更一般、更泛化的类，而子类则是更为具体、更为细化
问题12： 下面两种写法有什么区别?
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('hunger', 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 方法直接写在函数Person中，当创建Person的实例时，每个实例都有自己的printName 方法方法二中：printName 方法是写在Person.prototype中，当创建Person的实例时，每个实例中没有自己的PrintName方法，当实例调用PrintName时，无法在自己体内找到，所以会通过proto去原型里面找，也就是Person.prototype当中去找。所以第二种方法中，PrintName是所有实例公用的。
- 作用
第二种在原型里面找方法:不用自己再开辟内存空间去创建一个方法
问题13： Object.create 有什么作用？兼容性如何？
- 使用 Object.create 创建对象
ECMAScript 5 中引入了一个新方法：Object.create()可以调用这个方法来创建一个新对象。新对象的原型就是调用 create
方法时传入的第一个参数 -
兼容性
这是ES5才有的方法对于低版本浏览器兼容效果不理想
问题14： hasOwnProperty有什么作用？ 如何使用？
- 检测对象的属性是定义在自身上还是在原型链上，有必要使用** [hasOwnProperty] **方法，所有继承自 Object.proptotype 的对象都包含这个方法。会返回一个布尔值
[hasOwnProperty]是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法。
image.png
问题15：如下代码中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex);
//这里的 call作用:改变作用域,可以引用构造函数,使Male实例可以访问PersonPerson的属性
this.age = age;
}
问题16： 补全代码，实现继承
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log(this.name)
console.log(this.age)
console.log(this.sex)
};
function Male(name, sex, age){
Person.call(this,name,sex);
this.age = age;
}
Male.prototype=Object.create(Person.prototype)
//or
// var Temp = function(){}
// Temp.prototype = Person.prototype;
// Male.prototype = new Temp();
// Male.prototype.construction = Male;
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
网友评论