JS概念理解(一)——函数和对象、原型链、_proto_

原创 2017年07月21日 20:43:15

        最近发现自己JS的基础不太好,于是通过看书和大神的博客,通过自己的理解将一些难懂的概念在此总结:

        1.函数和对象的关系:

        在JavaScript中一切对象都是通过函数创建的,某些情况下的写法实际上是一种语法糖:

var a = {b : 20, c: 30};
var arr = [ 5 , "as", true];
//可以写成
var a = new Object();
a.b = 20;
a.c = 30;

var arr = new Array();
arr[0] = 5;
arr[1] = "as";
arr[2] = true;
        上面这两种写法实际上可以互相替换,我们经常使用的上面这种写法,因为更加简便,可读性更高,但是我们需要明白它们实际上也是通过函数创建的。

        2.Prototype原型链:

        在Java这类强类型语言当中,类在被创建好之后不允许再次添加其中的方法和属性,就像是盖印章,盖下去是什么就没法改变了。而在JavaScript中,由于它是弱类型语言,可以随时在程序中改变类中的方法和属性。

var aa = {a:10 , b:true};
console.log(aa.toString());   //结果:[object Object]
var bb = [ 10,20];
console.log(bb.toString());   //结果:10,20
        从上面的代码段可以看出来,由于它们的对象类型不同,结果也大不一样,是Array对象对Array.prototype.toString()进行了重载。

        如果我们想实现重载,也很简单只需要在继承的子类的prototype中修改父类的方法就可以了,因为原型链是一个链式结构,当子类需要一个方法时他总是会先去找自己的类中有没有该方法,如果没有在去父类中寻找。

function People() {
    this.name = "srk";
    this.age = 100;
}
People.prototype.speak = function () {
    console.log("hello person");
};

function Student() {}
Student.prototype = new People();   //实现继承
Student.prototype.speak = function () {
    console.log("hello student");
};
var p1 = new People();
var p2 = new Student();
p1.speak();//hello person
p2.speak(); //hello student
最后再放一幅图,很能说明JS原型链继承的特点:


        3._proto_隐式原型

        每个对象都拥有一个隐藏属性_proto_,该属性引用了创建这个对象的函数的prototype,还用上个例子的代码来说的话,p1._proto_ === People.prototype,关系如图所示:

        在这个图当中,o1的_proto_指向了Object.prototype,因为它实际上就是一个Object对象,然而Object.prototype也拥有一个_proto_属性,这个值为null。总而言之就是:对象的_proto_指向创建它的函数的prototype。

相关文章推荐

理解js中的原型链,prototype与__proto__的关系

理解js中的原型链,prototype与__proto__的关系 By Lone onNovember 10, 2011 说到prototype,就不得不先说下new的过程。 我们先看看这样一段...

理解js中的原型链,prototype与__proto__的关系

理解js中的原型链,prototype与__proto__的关系 By Lone on November 10, 2011 说到prototype,就不得不先说下new的过程。 我们先看看...

理解js中的原型链,prototype与__proto__的关系

理解js中的原型链,prototype与__proto__的关系 说到prototype,就不得不先说下new的过程。 我们先看看这样一段代码: ...
  • huithe
  • huithe
  • 2012年03月02日 21:31
  • 653

彻底理解原型、原型链、new操作符、prototype、__proto__、constructor等属性的概念

原型和原型链 构造函数 new操作符

js中的原型——__proto__和prototype

JavaScript中的对象有一个特殊的Prototype内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时Prototype属性都会被赋予一个非空的值。...

Javascript原型链的原理,JS的__proto__,prototype相关知识!

说到prototype,就不得不先说下new的过程。我们先看看这样一段代码:var Person = function () { };var p = new Person();script>很简单的一...

JS原型链中 _proto_和prototype及constructor的关系

总结: 1、对象有属性_proto_,指向prototype。a. 对象的_proto_指向其构造方法的原型对象。b. 原型对象的_proto_指向上一级原型对象。c. 2、方法除了有_proto_,...

js 原型链 __proto__ prototype

原型链 在创建一个函数时,就自动为该函数添加一个prototype属性, 该属性指向原型对象,默认情况下,该对象中只包块一个constructor属性, 它是一个指向prototype属性所在函数的指...

详解js中的原型链,prototype与__proto__的关系

说到prototype,就不得不先说下new的过程。 我们先看看这样一段代码: type="text/javascript"> var Person = function (...

阐述JS中原型链及prototype和__proto__的区别

阐述JS中原型链及prototype和__proto__的区别
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS概念理解(一)——函数和对象、原型链、_proto_
举报原因:
原因补充:

(最多只允许输入30个字)