• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

JS中prototype原型学习

JavaScript 神棍 450℃ 0评论

在js中经常可以看见prototype这个单词,今天打算学习一番0.0!

度娘翻译镇楼
prototype [美][ˈproʊtətaɪp] 脯肉特太婆(请原谅我拙计的英语)
n.原型,雏形,蓝本;

原型这个翻译好中庸啊,试着叫点别的,对象的雏形(一股文艺范),对象的蓝本(高大上)。

然并卵,还是得叫原型,才能和小伙伴愉快的交流。

分割线
—————————————————————————————————-
下面正式进入主题

每个Javascript对象(Object.prototype和null除外)都从原型里继承属性

初看这句话并没有什么很深的感触,所以拆分一下,Js对象 <–属性– 原型

故事就这样发生了,duang,duang,duang!

主人公: 小风(请接受我无耻的卖萌)

1、Js对象

<script>
        var dog = {};
</script>

这是一只刚出生的小狗,小风还没有来得及为他起名,当然,这个小家伙自己,也是迷迷糊糊,懵懵懂懂

2、属性
新生的喜悦总会让人怀旧,主人想起了儿时的动画片,那只像棉花糖一般的可爱小狗,起了一个好听的名字

<script>
dog.name = '小白';
</script>

是时候教他唱一首熟悉的歌谣了,小风默默地想到

<script>
dog.song = '大象,大象,你的鼻子为什么那么长?!';
</script>

费了九牛二虎加吃奶的努力,小白终于get了新技能

<script>
dog.sing = function(){
                console.log(this.song);
         };
</script>

3、原型
时光总是把人抛,小白生了小小白,小小白生了小小小白,每次都要教他们唱歌,实在是太累了

<script>
function Dog(name){
                 this.name = name;
                 this.song = '大象,大象,你的鼻子为什么那么长?!';
         }
         Dog.prototype.sing = function(){
                 console.log(this.song);
         }
</script>

对象可以从原型中继承属性,

所以小小白们在出生时,

<script>
var dogn = new Dog('我也不知道是第多少只小白了');
</script>

便get了sing这个新技能。

<script>
dogn.sing(); //console.log('大象,大象,你的鼻子为什么那么长?!');
</script>

而且只要他们愿意,他们可以自由的歌唱

<script>
dogn.song = '想唱就唱,我就是我,不一样的烟火~~~~';
         dogn.sing();
</script>

prototype单独出现的话,只是个单词

通过直接量创建的对象(var dog = {}),他的原型为Object.prototype,会从Object.prototype中继承默认方法toString()等,属性constructor等

而通过new方式创建的对象(比方说 var dog = new Dog()),其原型为Dog.prototype

原型链为:Object.prototype —> Dog.prototype –继承属性–> dog

所以想要定义Dog的默认方法,就可以放在Dog.prototype(这个狗的原型)上了

在网上看到的一篇关于JS中prototype的文章,特此扒来一看,分享给大家

转载请注明:Falost的小窝 » JS中prototype原型学习

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (7)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址