js面试题知识点全解(一原型和原型链1)

1.如何准确判断一个变量是数组类型
2.写一个原型链继承的例子
3.描述new一个对象的过程
4.zepto(或其他框架)源码中如何使用原型链
知识点:
1.构造函数
2.构造函数-扩展
3.原型规则和示例
4.原型链
5.instanceof

讲解:

构造函数:一般函数为大写字母开头的都是构造函数,如下:

function Foo(name,age){
    this.name=name
    this.age=age
    //return this
}var f = new Foo(‘L‘,20) ; //构造函数形成实例,可以创建多个对象;f是一个空对象,原型是Foo

var a={}其实是var a=new Object()的语法糖
var a=[]其实是var a=new Array()的语法糖
function Foo(){}其实是var Foo=new Function()

instanceof用于判断引用类型属于哪个构造函数的方法

f instanceof Foo //判断f这个引用类型是否属于Foo构造函数,判断逻辑:f的_proto_一层一层往上,能否对应到Foo.prototype

判断一个变量是否为"数组":变量名 instanceof Array,如下代码:

var arr=[];
arr instanceof Array //true
typeof arr //object, typeof是无法判断是否是数组的

原型规则和示例:

1.所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了"null"对象以外)
2.所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象
3.所有函数都有一个prototype(显示原型)属性,属性值也是一个普通对象

var obj={};
obj.a=100;
function fn(){}
fn.a=100;

console.log(obj._proto_); //隐式原型,都具有可扩展属性原则
console.log(fn.prototype); //显示原型

4.所有的引用类型,_proto_属性值指向它的构造函数的"prototype"属性值

console.log(obj._proto_===Object.prototype) //obj的构造函数为new Object(),所以obj的隐式原型属性就指向Object的显示原型属性

5.当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的_proto_(即它的构造函数的prototype)中寻找

 1 //构造函数
 2 function Foo(name,age){
 3     this.name = name
 4 }
 5 Foo.prototype.alertName= function(){
 6     alert(this.name+"killua");
 7 }
 8 //创建示例
 9 var f = new Foo("L");
10 f.lastName = function(){
11     console.log(this.name)
12 }
13 f.lastName(); //"L",自身属性
14 f.alertName(); //"Lkillua",原型属性
15 //以上函数中,f共有3个属性,f自身的属性有2个(name属性和lastName属性),还有一个alertName是原型属性
16 f.firstName();//这里f自身属性中没有firstName属性,它的原型Foo函数中也么有这个属性,所以要再往上一层Foo的原型上去找这个属性,这种有多层原型的函数就是原型链,直到null为止结束原型链
17 var item;
18 for(item in f){
19     // 高级浏览器已经在 for in 中屏蔽了来自原型的属性,但是这里建议加上这个判断,保证程序的健壮性
20     if(f.hasOwnProperty(item)){  //循环遍历f函数,如果f函数有它自身的属性item,则打印出item属性
21         console.log(item)
22     }
23 }

写一个原型链继承的例子:

  简单易懂的例子:

 1 function Name(){
 2     this.name=function(){
 3         console.log("killua")
 4     }
 5 }
 6 function Firstname(){
 7     this.firstname=function(){
 8         console.log("L")
 9     }
10 }
11 Name.prototype = new Firstname();
12 var he = new Name();
13 console.log(he.name); //"killua"
14 console.log(he.firstname); //"L"

  稍复杂点的例子(建议面试用):

 1 function Elem(id){
 2     this.elem = document.getElementById(id)
 3 }
 4 Elem.prototype.html = function(val){
 5     var elem = this.elem
 6     if(val){
 7         elem.innerHTML = val
 8         return this //链式操作
 9     }else{
10         return elem.innerHTML
11     }
12 }
13 Elem.prototype.on = function(type, fn){
14     var elem = this.elem
15     elem.addEventListener(type, fn) //addEventListener() 方法用于向指定元素添加事件句柄
16 }
17 var div1 = new Elem(‘div1‘)
18 //console.log(div1.html())
19 div1.html(‘<p>hello killua</p>‘).on(‘click‘,function(){
20     alert(‘clicked‘)
21 }).html(‘<p>javascript</p>‘)
时间: 2024-10-23 17:27:39

js面试题知识点全解(一原型和原型链1)的相关文章

js面试题知识点全解(一作用域和闭包)

问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ var name='killua' //把name定义在块里和放在外面是一样的,等同于在外面声明一个变量name,在块内给name赋值 }//同等于下面的代码 //建议用下面方式写 var name if(true){ name='killua' } console.log(name) //打印出来

js面试题知识点全解(一闭包)

闭包使用场景:1.函数作为返回值,如下场景 1 function F1(){ 2 var a = 100 //自由变量 3 //返回一个函数(函数作为返回值) 4 return function(){ 5 console.log(a) //a是定义的时候 的作用域,不是执行的时候的作用域,为100 6 } 7 } 8 //f1得到一个函数 9 var f1 = F1() 10 var a = 200 //全局作用域,不影响函数内作用域 11 f1() 2.函数作为参数传递 1 function

Js中this机制全解

JavaScript中有很多令人困惑的地方,或者叫做机制. 但是,就是这些东西让JavaScript显得那么美好而与众不同. 比方说函数也是对 象.闭包.原型链继承等等,而这其中就包括颇让人费解的this机制. 不管是新手还是老手,不仔细深抠一下还真闹不明白this倒地咋回事捏. 今天,我们 就一起看一下this倒地咋回事,别再为了this发愁了. this是啥?         简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是thi

《Java面试全解析》1000道面试题大全详解(转)

<Java面试全解析>1000道 面试题大全详解 本人是 2009 年参加编程工作的,一路上在技术公司摸爬滚打,前几年一直在上海,待过的公司有 360 和游久游戏,因为自己家庭的原因,放弃了阿里钉钉团队的 offer 回到了西安. 从 2015 年四月开始在一家上市公司担任研发经理的职位,至今也快 5 年了,一路上见了很多也面试了很多人技术人,大部分面试的结果很令我沮丧,这也是我出这本书的原因之一,帮助更多的人搞懂技术最核心的知识. 为了写好这个专栏内容,我先后拜访了一二十家互联网公司,与不同

最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)

最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入 原文地址:https://www.cnblogs.com/hfultrastrong/p/9928235.html

js中的原型与原型链详解

js中的原型与原型链详解 记住下面三句话就可以理解原型: 所有的函数数据类型都天生自带一个属性Prototype(原型)这个属性的值是一个对象,浏览器会默认给他开辟一个堆内存 在浏览器给prototype开辟的堆内存当中有一个天生自带的属性是constructor,这个属性存储的值是当前函数本身 每一个对象都有一个__proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定他是谁的实例,都是Object的实例) 原型链:如果引用构造函数的实例想要查找某个属性p的话: 首

JS原型与原型链终极详解 (转载)

这篇文章需要认认真真仔仔细细的看才能看懂 一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object

JS原型与原型链终极详解

一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object(); console.log(typeo

JS原型与原型链终极详解(转)

一. 普通对象与函数对象   JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f1(){};  var f2 = function(){};  var f3 = new Function('str','console.log(str)'); var o3 = new f1();  var o1 = {};  var o2 =new Object(); console.log(