对js原型的理解
1.值类型和引用类型,引用类型都是对象,通过typeof()测试类型,instanceof测试是否是对象。对象是属性的集合。
2.对象都是由函数创建的,函数又是一个对象。
3.函数有一个默认的属性,叫prototype,这个prototype的属性值是一个对象,即属性的集合,默认只有constructor这个属性,指向函数本身,prototype里面可以增加自己的属性。
function Fn(){}
Fn.prototype.name="王福朋";
Fn.prototype.getYear = function(){return 1988;};

var fn=new Fn();
console.log(fn.name);
console.(fn.getYear());
Fn是一个函数,fn对象从Fn函数new出来,这样fn对象就可以调用Fn.prototype中的属性。
每个对象都有一个隐藏的属性叫"__proto__",这个属性引用了创建这个对象的函数的prototype,即fn._proto_===Fn.prototype。
每个对象都有一个'__proto__',可成为"隐式原型"。
var obj={};
console.log(obj.__proto__);
用console.log(obj.__proto__)查看,返回值与Object.prototype的属性一样。
即obj.__proto__===Object.prototype;所以,每个对象都有一个__proto__属性指向创建该对象的函数的prototype;
自定义函数的prototype本质是和var obj={}是一样的,由Object创建,所以它的__proto__指向的是Object.prototype,而Object.prototype是一个特例,它的__proto__指向null。

(图片来自 王福朋的博客园)


自定义函数Foo.__proto__指向Function.prototype,Object.__proto__指向Function.prototype,Function.__proto__指向Function.prototype.
Function.prototype指向的对象的__proto__指向Object.prototype.
4.typeof对引用类型只能检测是否是对象或者函数,不能检测出是数组还是New Number等等,用Instanceof可以。
instanceof运算符的第一个变量是一个对象A第二个变量一般是一个函数B,判断规则是:
沿着A 的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true,如果找到重点还未重合,则返回false。

instanceof表示的是一种继承关系,或者原型链的结构。
5.原型链 即是访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条线向上找。
通过hasOwnProperty,能够区分属性到底是基本的还是从原型中找到的。
function Foo(){}
var f1=new Foo();
f1.a=10;
Foo.prototype.a=100;
Foo.prototype.b=200;
var item;
for(itrm in f1){
console.log(item);//输除a b;如果为if(f1.hasOwnProperty(item)){console.log(item);};则只返回a;
}
f1的hasOwnProperty方法来自于Object.prototype。
所有对象的原型链都会找到Object.prototype,因此所有对象都有有Object.prototyp的方法,这就是所谓的"继承"。
对象或者函数被new出来后,可能没有属性,可以自己添加。如果继承方法不合适,可以进行修改。
function Foo(){}
var f=new Foo(){
return:'name';
};
console.log(f1.toString());//name
6.执行上下文
即在"准备工作"中完成的工作:
变量、函数表达式--变量声明,默认赋值为undefined
this--赋值
函数声明--赋值;
JavaScript在执行一个代码段之前,都会进行这些—“准备工作”来执行上下文,这个“代码段”分三种情况--全局代码(<script>//代码段</script>),函数体,eval代码。
对js原型的理解的更多相关文章
- 37.js----浅谈js原型的理解
浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了! 在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象 语言的小白来说,有理解不了里面 ...
- js原型链理解(2)--原型链继承
1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...
- 浅谈Js原型的理解
一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了! 在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象 语言的小白来说,有理解不了里面的专有名词!如果你没 ...
- 浅谈对js原型的理解
一. 在JavaScript中,一切皆对象,每个对象都有一个原型对象(prototype),而指向该原型对象的内部指针则是__proto__.当我们对对象进行for in 或者for of遍历时,就 ...
- js原型链理解(3)--构造借用继承
构造借用(constructor strealing) 1.为什么已经存在原型链继承还要去使用构造借用 首先看一下这个例子 function Super(){ this.sets = [0,1,2]; ...
- JS原型链理解
1. 每个对象都有原型属性(__proto__)2. 对象的原型(__proto__)指向其构造函数(Class)的prototype属性3. 构造函数(Class)的prototype属性本身也是一 ...
- js原型链理解(4)-经典继承
经典继承就是组合继承,就是组合构造函数和原型链的优点混合继承. 1.避免引用类型的属性初始化 2.避免相同方法的多次初始化 function Super(name){ this.ages = [100 ...
- 简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
- 对于js原型和原型链继承的简单理解(第一种,原型链继承)
原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...
随机推荐
- Strawberry Perl CPAN Install Module 安装 Module 方法
我在 Windows 上用的是 Strawberry Perl. 安装好 Strawberry Perl 之后, 打开 CMD, 输入 CPAN <Module_Name> 即可安装你想要 ...
- AJAX POST&跨域 解决方案 - CORS(转载)
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...
- 头部固定下面滑动&&获取手机屏高
height(){ //获取屏高 let phone_height = document.documentElement.clientHeight; let group = this.refs.sea ...
- 比较Date时间先后
if ([firstDetailSelect compare:secondDetailSelect] == NSOrderedDescending) { [MBProgressHUD showErro ...
- iOS 判断字符串中含有某个字符串 rangeOfString
//判断roadTitleLab.text 是否含有qingjoin if([roadTitleLab.text rangeOfString:@"qingjoin"].locati ...
- codevs 1506 传话
http://codevs.cn/problem/1506/ 1506 传话 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 D ...
- find 命令使用总结
参考:http://os.51cto.com/art/200908/141119.htm 1.find命令的一般形式 find pathname -options [-print -exec -ok ...
- Java基础(1):Switch语句注意的5个地方
不得不说的几点小秘密: 1. switch 后面小括号中表达式的值必须是整型或字符型 2. case 后面的值可以是常量数值,如 1.2:也可以是一个常量表达式,如 2+2 :但不能是变量或带有变量的 ...
- ArrayList和LinkList区别
ArrayList和LinkList区别 前者是数组的数据结构,后者是链表的数据结构 前者应用于排序和查找,后者应用于插入删除
- CentOS 5.5 Nginx+JDK+MySQL+Tomcat(jsp)成功安装案例
在CentOS 5.5中安装Nginx+jdk+mysql+tomcat是非常容易的.只需yum安装环境包和nginx.解压安装jdk和tomcat.配置profile文件.server.xml和ng ...