Javascript基础(三)原型和原型链
2017-07-07 17:54
197 查看
题目:
如何准确判断一个变量是数组类型
写一个原型链集成的例子
描述new一个对象的过程
zepto(或其他框架)源码中如何使用原型链
————————————–我是思考分界线——————————————–
知识点:
1、构造函数
2、构造函数-扩展
3、原型规则和示例
4、原型链
5、instanceof
1、构造函数
2、构造函数–拓展
使用instanceof判断一个函数是否属于一个变量的构造函数;
3、原型规则和示例
原型链:
instanceof:
判断引用类型属于哪个构造函数的方法
判断逻辑是:f的
解题:
1、如何准确判断一个变量是数组类型
2、 写一个原型链集成的例子
3、 描述new一个对象的过程
构造函数;
(1)、创建一个新对象
(2)、 this指向这个新对象
(3)、 执行代码,即对this赋值
(4)、返回this
4、zepto(或其他框架)源码中如何使用原型链
如何准确判断一个变量是数组类型
写一个原型链集成的例子
描述new一个对象的过程
zepto(或其他框架)源码中如何使用原型链
————————————–我是思考分界线——————————————–
知识点:
1、构造函数
2、构造函数-扩展
3、原型规则和示例
4、原型链
5、instanceof
1、构造函数
function Foo(name.age){ this.name = name; this.age = age; this.class='class_1'; //return this; //默认return this } var f = new Foo('zhangsan',20);
2、构造函数–拓展
var a = {}其实是var a = new Object()的语法糖; var a = [] 其实是 var a = new Array()的语法糖; function Foo(){}其实是var Foo = new Function()的语法糖;
使用instanceof判断一个函数是否属于一个变量的构造函数;
3、原型规则和示例
5条原型规则 (1)、所有的引用类型(数组,对象,函数),都具有对象特性,即可以自由拓展属性(除了’null‘意外); (2)、所有的引用类型(数组,对象,函数),都有一个`'__proto__'`(隐式类型)属性,属性值是一个普通的对象。 (3)、所有的函数,都有一个prototype(显示原型),属性值也是一个普通的对象。 (4)、所有的引用类型(数组、对象、函数),`'__proto__'`属性指向他的构造函数’prototype‘属性值。
//构造函数代码示例 function Foo(name ,age){ this.name = name } Foo.prototype.alertName = function(){ alert(this.name); } //创建示例 var f = new Foo('zhangsan') f.printName = function(){ console.log(this.name); } //测试 f.printName(); f.alertName();
var item for(item in f){ //高级浏览器已经在 for in中屏蔽了来自原型的属性 //但是这里建议大家还是加上这个判断,保证程序的健壮性 if(f.hasOwnProperty(item)){ //判断item是否能通过hasOwnProperty的验证,通过就说明它是f当中的属性 console.log(item); } }
原型链:
//构造函数代码示例 function Foo(name ,age){ this.name = name } Foo.prototype.alertName = function(){ alert(this.name); } //创建示例 var f = new Foo('zhangsan') f.printName = function(){ console.log(this.name); } 9d63 //测试 f.printName(); f.alertName(); f.toString();//要去 f.__proto__.__proto__ 中查找 //即要去Object.prototype中找 //即要去Object.__proto__ 会找到null
instanceof:
判断引用类型属于哪个构造函数的方法
f instanceof Foo true
判断逻辑是:f的
'__proto__'一层一层往上找,能否找到对应的Foo.prototype
f instanceof Object true
解题:
1、如何准确判断一个变量是数组类型
arr instanceof Array
2、 写一个原型链集成的例子
//封装一个dom查询的例子 function Elem (id){ this,elem = document.getElementByI的(id) } Elem.prototype.html = function(val){ var elem = this.elem if(var){ elem.innerHTML = val; return this;//链式操作 }else{ return elem.innerHTML } } Elem.prototype.on = function(type,fn){ var elem = this.elem elem.addEventListener(type,fn) } var div1 = new Elem ('div1) //console.log(div1.html) div.html('<p>Hello</p>') div1.on('click',function(){ alert('clicked') })
3、 描述new一个对象的过程
构造函数;
(1)、创建一个新对象
(2)、 this指向这个新对象
(3)、 执行代码,即对this赋值
(4)、返回this
4、zepto(或其他框架)源码中如何使用原型链
阅读源码是高效提高技能的方式 但不能埋头苦钻,有技巧 先去网上搜,,比如jquery源码分析什么的,会有结构
相关文章推荐
- 【javascript基础】原型与原型链
- JavaScript基础之原型对象和原型链
- (转)【javascript基础】原型与原型链
- JavaScript原型继承之基础机制分析
- 深入理解JavaScript系列(5):强大的原型和原型链
- 深入理解JavaScript系列(5):强大的原型和原型链
- 深入理解JavaScript系列(5):强大的原型和原型链
- JavaScript探秘:强大的原型和原型链
- JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
- 深入理解JavaScript系列(5):强大的原型和原型链
- javascript面向对象基础 工厂与原型
- 【javascript基础】4、原型与原型链
- 深入理解JavaScript系列(6) 强大的原型和原型链
- javascript基础之我见(1)----深度理解原型链
- javascript原型和原型链
- 【javascript基础】4、原型与原型链
- JavaScript原型继承之基础机制(转)
- Javascript OO 基础概念(三)–原型继承
- JavaScript探秘:强大的原型和原型链
- 深入理解JavaScript系列(5):强大的原型和原型链