首页 > webfront > ECMAS > js > > 正文

坑爹的JS笔试题

发布人:zhoulujun@live.cn    点击:

1,考察thisvarlength=10functionfn(){alert(this length)}varobj={length:5,method:function(fn){fn() ?arguments[0]() ?}}obj method(f

关于js原型

function A(){
}
function B(a){
  this.a = a;
}
function C(a){
  if(a){
this.a = a;
  }
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
  
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

分析:

console.log(new A().a);  //new A()为构造函数创建的对象,本身没有a属性,所以向它的原型去找,发现原型的a属性的属性值为1,故该输出值为1;

console.log(new B().a);  //new B()为构造函数创建的对象,该构造函数有参数a,但该对象没有传参,故该输出值为undefined;

console.log(new C(2).a);  //new C()为构造函数创建的对象,该构造函数有参数a,且传的实参为2,执行函数内部,发现if为真,执行this.a = 2,故属性a的值为2;

故这三个的输出值分别为:1、undefined、2.  

再来一道复杂的:

function Foo() {
  getName = function () {
     console.log(1);
  };
  return this;
}
Foo.getName = function () {
   console.log(2);
};
Foo.prototype.getName = function () {
   console.log(3);
};
var getName = function () {
  console.log(4);
};
function getName() {
   console.log(5);
}
//请写出以下输出结果:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

答案是:

//答案:
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

解说:http://www.jb51.net/article/79461.htm



JS闭包面试题

function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n);
        }
    };
}

var a = fun(0);a.fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);c.fun(2);c.fun(3);
//问:三行a,b,c的输出分别是什么?

参考答案:http://blog.csdn.net/FE_dev/article/details/74124373


考察this

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn() // ?
        arguments[0]() // ?
    }
}
obj.method(fn)

这里的坑主要是arguments,我们知道取对象属于除了点操作符还可以用中括号,这里fn的scope是arguments,即fn内的this===arguments,调用时仅传了一个参数fn,因此length为1。

this 的指向

var name = "windowsName";
function a() {
    var name = "Cherry";
    console.log(this.name);   // windowsName
    console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this)   // outer: Window

这个相信大家都知道为什么 log 的是 windowsName,因为根据刚刚的那句话“this 永远指向最后调用它的那个对象”,我们看最后调用 a 的地方 a();,前面没有调用的对象那么就是全局对象 window,这就相当于是 window.a();注意,这里我们没有使用严格模式,如果使用严格模式的话,全局对象就是 undefined,那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。


函数表达式具名(函数声明同时赋值给另一个变量)或函数声明立即执行时,名仅在该函数内可访问

~function() {
    alert(typeof next) // ?
    ~function next() {
        alert(typeof next) // ?
    }()
}()

外层匿名函数自执行,打印next,接着内层具名函数自执行。会发现具名的next仅在其自身函数体内可访问,即输出为function。外面是不可见的,typeof就为undefined了。(注:此题IE6/7/8中输出为function function, 标准浏览器为undefined function)


同样的情况也发生在将具名函数赋值给一个变量时,如下

var func = function a() {
    alert(typeof a)
}
func() // ?
alert(typeof a) // ?


这条规则是标准中(ES3/ES5)都已明确指出,但IE6、7、8没有严格遵从。可参见w3help的分析或李松峰老师的翻译《命名函数表达式探秘

 类是题目:

if('a' in window) {
  var a = 10;
}
 
alert(a);//10

切记只有function(){}内新声明的才能是局部变量,while{…}、if{…}、for(..) 之内的都是全局变量(除非本身包含在function内)。


3,给基本类型数据添加属性,不报错,但取值时是undefined

a = 3
a.prop = 4
alert(a + a.prop) // ?

变量a为数字3,给其添加prop属性,值为4(奇怪吧在JS中这是允许的,且不会有语法错误)。然后alert出a+a.prop的结果。结果是NaN。a.prop为undefined,3+undefined为NAN。

举一反三,给字符串添加属性,字符串也允许

结果呢?

 

隐式的全局变量

var a = 1
function func() {
    a = b = 2
}

func()
alert(a)
alert(b) // ?

JS中不用var声明的变量默认是全局变量,而这里的连等使的情况更加隐蔽。这里的b是全局的,因此func外可以访问。



变量声明早于代码运行(Scoping and Hoisting

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)
}
change()

这里容易犯迷糊的是第一个alert,如果认为函数change外已经声明赋值了,此时应该是jack,实际函数内又var了一次(虽然var在其后),预解析时仍然会将其置undefined。这也是为什么书里都建议变量声明都放在代码块的最前面。

 

函数声明早于变量声明

function change() {
    console.log(typeof fn) // ?
    function fn() {
        console.log('hello')
    }
    var fn;
    console.log( fn)// ?
}
change()

change内先alert出fn,后函数声明,再变量声明。如果fn没有函数声明而仅是变量声明,那么结果与5一样是undefined。但这里却是function。即同一个作用域内,函数声明放在代码块后面和前面都没有关系,函数可以正常使用。而变量声明则需先置前,先使用则是undefined。

类是题目:

console.log(typeof fn);
function fn() {};
var fn


动态作用域和静态作用域的区别:

上面题目改造下:

var uname = 'jack'
function change() {
  console.log(uname)
}

(function () {
  console.log(uname) // ?
  var uname = 'lily'
  change();
})()

静态作用域又称之为词法作用域:即词法作用域的函数中遇到既不是形参也不是函数内部定义的局部变量的变量时,它会根据函数定义的环境中查询。

JS 的变量是遵循静态作用域的,在上述代码中会打印出jack  而非 lily,因为 static 函数在作用域创建的时候,记录的 foo 是 jack,如果是动态作用域的话,那么它应该打印出 lily

  • 静态作用域是产生闭包的关键,即它在代码写好之后就被静态决定它的作用域了。

  • 动态域的函数中遇到既不是形参也不是函数内部定义的局部变量的变量时,到函数调用的环境去查询在

 JS 中,关于 this 的执行是基于动态域查询的,下面这段代码打印出 1,如果按静态作用域的话应该会打印出 2

var foo = 1;

var obj = {
    foo: 2,
    bar: function() {
        console.log(this.foo);
    }
};

var bar = obj.bar;
bar();


判断一个字符串中出现次数最多的字符,并统计次数

hash table方式:

var s = 'aaabbbcccaaabbbaaa';
var obj = {};
var maxn = -1;
var letter;
for(var i = 0; i  maxn) {
      maxn = obj[s[i]];
      letter = s[i];
    }
  } else {
    obj[s[i]] = 1;
    if(obj[s[i]] > maxn) {
      maxn = obj[s[i]];
      letter = s[i];
    }
  }
}
 
alert(letter + ': ' + maxn);
  • 正则方式:

var s = 'aaabbbcccaaabbbaaabbbbbbbbbb';
var a = s.split('');
a.sort();
s = a.join('');
var pattern = /(\w)\1*/g;
var ans = s.match(pattern);
ans.sort(function(a, b) {
    return a.length < b.length;
});;
console.log(ans[0][0] + ': ' + ans[0].length);

经典闭包

   第一个链接     第二个链接     第三个链接     第四个链接 


var lis = document.links;
for(var i = 0, length = lis.length; i < length; i++) {
    lis[i].index = i;
    lis[i].onclick = function() {
        alert(this.index);
    };
}



dom污染:

  •  var lis = document.links;
        for(var i = 0, length = lis.length; i < length; i++) {
          (function(i) {
            lis[i].onclick = function() {
              alert(i + 1);
            };
          })(i); 
        }


参考文章:

总结一些前端的知识点 (一)