前端面试之---javascript原型
2017-09-02 10:35
615 查看
知识点
构造函数
function Foo(name,age) { this.name = name; this.age = age; this.class = 'class -1'; //return this; } var f = new Foo('zhangsan',20); // var f1 = new Foo('lisi',21);
构造函数-扩展
原型规则和实例
5条原型规则是理解原型链的基础所有的引用类型(除null外)都可以自由扩展属性
所有的引用类型都有一个_proto_属性,叫隐式原型。属性值是一个普通的对象
所有的函数,都有一个prototype属性,叫显式原型。属性值是一个普通的对象
所有的引用类型的_proto_属性,指向它的构造函数的prototype属性值;
当试图得到一个对象的某个属性时,如果没有,会向它的_proto_中找。即去它的构造函数的prototype中找。
var obj = {}; obj.a = 100; var arr = []; arr.b = 200; function fn() { } fn.a = 100; console.log(obj.__proto__); console.log(arr. 4000 __proto__); console.log(fn.__proto__); console.log(fn.prototype); console.log(obj.__proto__ === Object.prototype);
function Foo(name, age) { this.name = name; } Foo.prototype.alertName = function () { console.log(this.name) } var f = new Foo('zhangsan',20); f.printName = function () { console.log(this.name) } f.printName(); f.alertName();
f.toString();
//对象自身没有toString,先去f的隐式原型中找,即Foo.prototype中找; //Foo.prototype也没有,再去Foo.prototype的隐士原型中找。,即Foo.prototype的构造函数的prototype, //即Function.prototype中找。即Object中找。
//f.__proto__.__proto__
var item ; for(item in f){ if(f.hasOwnProperty(item)){ //高级浏览器已经在for in中屏蔽了来自原型的属性 //建议加上这个判断,保证程序的健壮性 console.log(item); } }
原型链
Instanceof
如何准确判断一个对象是数组类型
写一个原型链继承的例子
这样写会特别low 要写一个实战的例子function Animal() { this.eat = function () { console.log("animal eat"); } } function Dog() { this.bark = function () { console.log("dog bark") } } Dog.prototype = new Animal(); var hashiqi = new Dog();
描述new一个对象的过程
创建一个新对象This指向这个对象
执行代码,对this赋值
返回this
Zepto或其他框架源码是如何实现原型链的
没有全看,重点看,需要就看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); return this; } var div1 = new Elem('detail-page'); // console.log(div1.html()); div1.html("<p>hello world</p>>").on('click',function () { alert("_clicked_") }).html('<p>javascript</p>>');
相关文章推荐
- 前端面试-----JavaScript中原型链与原型
- web前端之悟透JavaScript三:JavaScript真经(原型)
- 前端面试题目汇总(一)HTML、CSS、JavaScript
- 【面试必备】javascript的原型和继承
- 问得最多的十个JavaScript前端面试问题
- 征服JavaScript面试系列:类继承和原型继承的区别
- 前端面试JavaScript编程
- Web前端面试指导(二十七):原型是什么?原型链是什么?
- 前端面试系列之---javascript基础和数据类型
- JavaScript面向对象(二)--前端必须知道的原型和继承
- 前端面试知识点锦集 JavaScript
- 前端开发必须知道的JavaScript原型和继承
- 前端面试-----JavaScript中变量类型与计算
- 前端面试准备之JavaScript
- Web前端面试指导(五十一):javascript的编写规范有哪些?
- Web前端面试指导(三十):JavaScript有几种类型的值?你能画一下他们的内存图吗?
- 前端面试-----JavaScript内置函数
- 前端开发面试笔试学习--JavaScript01
- web前端面试-------javaScript基础知识点之数据类型
- 前端面试总结(JavaScript)