Rumah > hujung hadapan web > tutorial js > JS原型和原型链详解

JS原型和原型链详解

小云云
Lepaskan: 2018-03-07 14:29:27
asal
1713 orang telah melayarinya

本文主要和大家分享JS原型和原型链实例详解,希望能帮助大家对JS原型和原型链有一个更清晰的认识。

构造函数(函数名首字母大写):类似一个模版

function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class1';
//return this;默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);创建多个对象
Salin selepas log masuk

构造函数 - 扩展:(所有的引用类型都有构造函数)

var a = {} 其实是 var a = new Object()的语法糖

var a = [] 其实是 var a = new Array()的语法糖

function Foo(){...} 其实是 var Foo = new Function()

使用instanceof判断一个函数是否是一个引用类型的构造函数

*原型规则和示例:(原型规则是学习原型链的基础)

5条原型规则:

-所有的引用类型(对象、数组、函数),都具有对象特性,即可自由扩展属性(除了'null'以外)

-所有的引用类型(对象、数组、函数),都有一个__proto__(隐式原型)属性,属性值是一个普通的对象

-所有的 函数 都有一个prototype(显示原型)属性,属性值也是一个普通的对象

-所有的引用类型(对象、数组、函数),__proto__属性值指向它的构造函数的"prototype"属性值, 即

var obj = {}; ==> var obj = new Object();

console.log(obj.__proto__ === Object.prototype)

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

var item;
for(item in f){
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是在这里建议大家加上这个判断,保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item);
}
}
Salin selepas log masuk

原型链:

写一个封装DOM查询的例子:

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 p1 = new Elem('p1');
//console.log(p1.html());//打印HTML即DOM结构;
//赋值内容并且绑定事件
p1.html(&#39;<p>hello imooc</p>&#39;);
p1.on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
})
//链式操作
p1.html(&#39;<p>hello imooc</p>&#39;).on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
}).html(&#39;<p>javascript</p>&#39;);
instanceof:
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;
Salin selepas log masuk

1.如何准确判断一个变量是数组类型?

变量 instanceof Array

2.写一个原型链继承的例子

//动物
function Animal(){
this.eat = function(){
console.log(&#39;animal eat&#39;);
}
}
//狗
function Dog(){
this.bark = function(){
console.log(&#39;dog bark&#39;);
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = &#39;class1&#39;
//return this;
}
var f = new Foo(&#39;zhangsan&#39;,20);
//var f1 = new Foo(&#39;lisi&#39;,22);
Salin selepas log masuk

-创建一个新对象

-this.指向这个新对象

-执行代码,即对this赋值

-返回this

4.zepto(或其他框架)源码中如何使用原型链?

-阅读源码是高效提高技能的方式

-但不能“埋头苦钻”有技巧在其中

-慕课网搜索“zepto设计和源码分析”

相关推荐:

JavaScript中原型和原型链详解_基础知识

理解javascript中的原型和原型链_基础知识

学习javascript面向对象 理解javascript原型和原型链_javascript技巧

Atas ialah kandungan terperinci JS原型和原型链详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan