js面试题知识点全解(一原型和原型链)
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)中寻找
//构造函数
function Foo(name,age){
this.name = name
}
Foo.prototype.alertName= function(){
alert(this.name+"killua");
}
//创建示例
var f = new Foo("L");
f.lastName = function(){
console.log(this.name)
}
f.lastName(); //"L",自身属性
f.alertName(); //"Lkillua",原型属性
//以上函数中,f共有3个属性,f自身的属性有2个(name属性和lastName属性),还有一个alertName是原型属性
f.firstName();//这里f自身属性中没有firstName属性,它的原型Foo函数中也么有这个属性,所以要再往上一层Foo的原型上去找这个属性,这种有多层原型的函数就是原型链,直到null为止结束原型链
var item;
for(item in f){
// 高级浏览器已经在 for in 中屏蔽了来自原型的属性,但是这里建议加上这个判断,保证程序的健壮性
if(f.hasOwnProperty(item)){ //循环遍历f函数,如果f函数有它自身的属性item,则打印出item属性
console.log(item)
}
}
写一个原型链继承的例子:
简单易懂的例子:
function Name(){
this.name=function(){
console.log("killua")
}
}
function Firstname(){
this.firstname=function(){
console.log("L")
}
}
Name.prototype = new Firstname();
var he = new Name();
console.log(he.name); //"killua"
console.log(he.firstname); //"L"
稍复杂点的例子(建议面试用):
function Elem(id){
this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
var elem = this.elem
if(val){
elem.innerHTML = val
return this //链式操作
}else{
return elem.innerHTML
}
}
Elem.prototype.on = function(type, fn){
var elem = this.elem
elem.addEventListener(type, fn) //addEventListener() 方法用于向指定元素添加事件句柄
}
var div1 = new Elem('div1')
//console.log(div1.html())
div1.html('<p>hello killua</p>').on('click',function(){
alert('clicked')
}).html('<p>javascript</p>')
js面试题知识点全解(一原型和原型链)的更多相关文章
- js面试题知识点全解(一原型和原型链1)
1.如何准确判断一个变量是数组类型2.写一个原型链继承的例子3.描述new一个对象的过程4.zepto(或其他框架)源码中如何使用原型链知识点:1.构造函数2.构造函数-扩展3.原型规则和示例4.原型 ...
- js面试题知识点全解(一变量类型和计算)
1.js中使用typeof能得到哪些类型 2.何时使用===和== 3.js中的内置函数 4.js变量按存储方式区分为哪些类型,并描述其特点 5.如何理解json 以下对这些问题的知识点做一些总结: ...
- js面试题知识点全解(一作用域和闭包)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
- js面试题知识点全解(一作用域)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
- js面试题知识点全解(一闭包)
闭包使用场景:1.函数作为返回值,如下场景 function F1(){ var a = 100 //自由变量 //返回一个函数(函数作为返回值) return function(){ console ...
- [转载] Python数据类型知识点全解
[转载] Python数据类型知识点全解 1.字符串 字符串常用功能 name = 'derek' print(name.capitalize()) #首字母大写 Derek print(name.c ...
- c# 实用精华知识点全解
本文介绍c#的实用知识点 写在前面(通识) vs常用快捷键 F5 调试运行程序 ctrl F5 不调试运行程序 F11 逐条语句调试 F10 逐过程调试程序 注释快捷键 ctrl + k + c 代码 ...
- JAVA笔试题(全解)
目录 一. Java基础部分................................................................. 9 1.一个".java& ...
- Js中this机制全解
JavaScript中有很多令人困惑的地方,或者叫做机制. 但是,就是这些东西让JavaScript显得那么美好而与众不同. 比方说函数也是对 象.闭包.原型链继承等等,而这其中就包括颇让人费解的th ...
随机推荐
- Node.js模块、包的学习笔记
什么是模块 模块是node应用程序的基本组成部分,文件和模块是一一对应的,就是说,一个node文件就是一个模块,这个文件可能是javascript代码.json或者是编译过的c++扩展等,如: var ...
- Python爬虫之利用正则表达式爬取内涵吧
首先,我们来看一下,爬虫前基本的知识点概括 一. match()方法: 这个方法会从字符串的开头去匹配(也可以指定开始的位置),如果在开始没有找到,立即返回None,匹配到一个结果,就不再匹配. 我们 ...
- 12-THREE.JS 自然光
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- Spring_总结_04_高级配置(五)_运行时注入值
一.前言 本文承接上一节:Spring_总结_04_高级配置(四)_bean的作用域 当讨论依赖注入的时候,我们通常所讨论的是将一个bean引用注入到另一个bean的属性或者构造参数中.它通常指的是将 ...
- 配合Jenkins自动化构建,bat脚本(一)
C:\Windows\System32\inetsrv\appcmd.exe stop site ServiceIIS C:\Windows\System32\inetsrv\appcmd.exe s ...
- vue-cli 脚手架项目-package.json
使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在packag ...
- IDEA使用操作文档
IDEA中怎么设置黑色或白色背景? http://jingyan.baidu.com/article/4e5b3e19330df191911e246b.html 一. IntelliJ IDEA 的 ...
- 开发mis系统用到的技术
1. b/s架构:就broser/server,浏览器/服务器的说法.服务器端要运行tomcat,提供链接数据库服务供java代码读写数据,这个可以在eclipse中配置运行.浏览器则解释jsp或ht ...
- object.observe数据绑定
object.observe方法格式如下: object.observe(object,callback) 监听object对象,当该对象有新增或更新或删除等操作,就会触发callback,就实现了双 ...
- Angular5学习笔记 - 配置NG-ZORRO(八)
一.在项目中集成组件 $ cd PROJECT_NAME $ npm install ng-zorro-antd --save 二.在项目中导入组件 直接用下面的代码替换 /src/app/app.m ...