問題1: apply决乎、call 、bind有什么作用派桩,什么區(qū)別
- call 和 apply 作用一樣构诚。都是把obj(this)綁定到thisobj上。重新定義函數(shù)的執(zhí)行環(huán)境.call接受n個參數(shù)的列表铆惑,apply接受若干個參數(shù)的數(shù)組
obj.call(thisobj,arg1,arg2,....)
obj.apply(thisobj,[arg1,arg2,...])
為什么要有apply和call范嘱?
function T(name){
this.name = name
this.show = function(){
console.log(this.name)
}
}
function Person(age){
this.age = age
}
假設在Person函數(shù)體內(nèi)也需要這么一個show方法且一模一樣,但又不想如下這樣寫员魏,代碼顯得重復丑蛤。
function Person(age,name){
this.age = age
this.show = function(){
console.log(this.name)
}
}
這時候call apply就有用了
function Person(age,name){
T.call(this,name)
this.age = age
}
### bind()和call 和 apply類似,也是改變this.
### 只不過bind()是引用(不會立即執(zhí)行)撕阎。call是調(diào)用(會立即執(zhí)行)
問題2: 以下代碼輸出什么
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
***
var john = {
firstName: 'John',
func: function(){}
}
john.sayHi()//這里的this指向john
Jonh:hi!
問題3: 下面代碼輸出什么受裹,為什么
func()
function func() {
alert(this)
}
***
函數(shù)內(nèi)部:this的值取決于函數(shù)時如何調(diào)用的
func() === undefined
但有些瀏覽器把undefined錯誤轉(zhuǎn)換為window
func() === window
問題4:下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
***
- 這里的this指向window
問題5:下面代碼輸出什么,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
***
func() 執(zhí)行 使用call把john當this傳遞進去 此時this變成john
輸出 : 'John'
問題6: 以下代碼有什么問題,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
***
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
這里的this調(diào)用者($btn)
修改后:var module= {
bind: function(){
$('#btn').on('click', function(){
console.log(this) //this指什么
this.showMsg()
}.bind(this))
},
showMsg: function(){
console.log('饑人谷');
}
}
問題7:有如下代碼棉饶,解釋Person厦章、 prototype、proto照藻、p袜啃、constructor之間的關聯(lián)。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
***
function Person(name){
this.name = name;
}
var p = new Person("若愚")
//創(chuàng)建空對象作為this
//this.__proto__ = Person.prototype
//運行構造函數(shù)
//返回this
![](2.png)
問題8: 上例中幸缕,對對象 p可以這樣調(diào)用 p.toString()群发。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。
自己體內(nèi)找不到发乔,通過__proto__找熟妓,原型上找不到,通過__proto__繼續(xù)找列疗,知道找到為止
![](prototype.png)
從上圖中:原型與原型通過__proto__相連形成原型鏈
問題9:對String做擴展滑蚯,實現(xiàn)如下方式獲取字符串中頻率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次
str = 'ahbbccdeddddfg'
String.prototype.getMostOften = function(){
var obj = {}
var num = 0
var sub = ''
for(var i=0;i<str.length;i++){
if(obj[str[i]]){
++obj[str[i]]
}else{
obj[str[i]] = 1
}
}
for(var key in obj){
if(obj[key]>num){
num = obj[key]
sub = key
}
}
return sub+'出現(xiàn)'+num+'次'
}
console.log(str.getMostOften())
String.prototype.getMostOften=function(){
var obj = {}
var num = 0
var s = ''
for(var i =0;i<this.length;i++){
if(obj[this[i]]){
++ob[this[i]]
}else{
obj[this[i]] = 1
}
}
for(var key in obj){
if(obj[key]>num){
s = key
num = obj[key]
}
}
return s + '出現(xiàn)' + num + '次'
}
String.prototype.getMostOften=function(){
var obj = {}
var num = 0
var s = ''
for(var i =0;i<this.length;i++){
if(obj[this[i]]){
++obj[this[i]]
}else{
obj[this[i]] = 1
}
}
for(var key in obj){
if(obj[key]>num){
s = key
num = obj[key]
}
}
return s + '出現(xiàn)' + num + '次,頻率最高浪蹂!'
}
var str = 'ahbbccdeddddfg'
var str = new String() //String.prototype
console.log( str.getMostOften())
問題10: instanceOf有什么作用抵栈?內(nèi)部邏輯是如何實現(xiàn)的?
也叫關系運算符: A instanceOf B B的原型對象出現(xiàn)在A的原型鏈中返回true
先從自己內(nèi)部找 沒有在通過__proto__到原型上找坤次,原型上沒有在通過__proto__在Object的原型上找
![](http://upload-images.jianshu.io/upload_images/5835943-2f5f010ba5633761.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
問題11:繼承有什么作用?
繼承可以提高代碼的重用性古劲。比如要寫2個拖拽 ,一個拖拽在視口范圍內(nèi)活動缰猴,一個沒有限制产艾。利用繼承來提高的代碼的重用性
子類有繼承父類的屬性和方法。不需要重復寫代碼滑绒。
如果該改變效果闷堡,也可以覆蓋原型上的方法,自定義一個疑故。非常靈活
問題12: 下面兩種寫法有什么區(qū)別?
//方法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);
方法一和方法二相比杠览,把方法寫在構造函數(shù)內(nèi),
假設有10個士兵纵势,每個士兵都會跑
那我new 10次 在內(nèi)存中就開辟了10次新的空間
而寫在原型上踱阿,不但可以節(jié)省內(nèi)存,方法還可以公用
問題13: Object.create 有什么作用钦铁?兼容性如何软舌?
使用指定的原型對象和屬性創(chuàng)建一個新的對象
function Aa(){}
Aa.prototype.show = function(){}
function Ba(){}
Ba.prototype = Object.create(Aa.prototype)
要寫多個繼承對象,可使用jq中$.extend()方法進行深度拷貝
<a >參考地址</a>
對Ie不兼容
問題14: hasOwnProperty有什么作用牛曹? 如何使用佛点?
判斷某個對象是否含有指定的值(不包括通過原型鏈進行查找)
function Tab(name,age){
this.name = name
this.age = age
}
Tab.prototype.show=function(){
console.log(this.name)
}
var obj = new Tab('lii',18)
console.log(obj.hasOwnProperty('name'))//true
console.log(obj.hasOwnProperty('show'))//false
問題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;
}
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
Person() 會執(zhí)行
this.name = name
this.sex = sex
當
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
這里的this指的是當前對象 就完成了屬性拷貝
問題16: 補全代碼,實現(xiàn)繼承
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 = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.getAge = function(){
console.log(this.age)
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
<p></p>