深入了解JS原型和原型链，new、this关键字详解

最新推荐文章于 2024-09-02 17:27:54 发布

阿博呀呀呀。

最新推荐文章于 2024-09-02 17:27:54 发布

阅读量428

点赞数

分类专栏： jquery 文章标签： javascript jquery html html5 css

本文链接：https://blog.csdn.net/weixin_47703646/article/details/108038068

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作用：

深入javascript之原型和原型链

原型和原型链是js中的难点也是重点，明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效，并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型，原型链有深刻全面的了解。

深入系列：深入javascript之作用域

深入系列：深入javascript之执行上下文

一，函数对象

所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）

所有函数拥有prototype属性（显式原型）（仅限函数）

原型对象：拥有prototype属性的对象，在定义函数时就被创建

二，构造函数

先复习下构造函数

//创建构造函数
        function Word(words){
            this.words = words;
        }
        Word.prototype = {
            alert(){
                alert(this.words);
            }
        }
        //创建实例
        var w = new Word("hello world");
        w.print = function(){
            console.log(this.words);
            console.log(this);  //Person对象
        }
        w.print();  //hello world
        w.alert();  //hello world

print()方法是w实例本身具有的方法，所以w.print()打印hello world；alert()不属于w实例的方法，属于构造函数的方法，w.alert()也会打印hello world，因为实例继承构造函数的方法。

实例w的隐式原型指向它构造函数的显式原型，指向的意思是恒等于

         w.__proto__ === Word.prototype

当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性：

w本身没有alert()方法，所以会去Word()的显式原型中调用alert()，即实例继承构造函数的方法。

三，原型和原型链

 Function.prototype.a = "a";
        Object.prototype.b = "b";
        function Person(){}
        console.log(Person);    //function Person()
        let p = new Person();
        console.log(p);         //Person {} 对象
        console.log(p.a);       //undefined
        console.log(p.b);       //b

想一想p.a打印结果为undefined，p.b结果为b

解析：

p是Person()的实例，是一个Person对象，它拥有一个属性值__proto__，并且__proto__是一个对象，包含两个属性值constructor和__proto__

        console.log(p.__proto__.constructor);   //function Person(){}
        console.log(p.__proto__.__proto__);     //对象{}，拥有很多属性值

我们会发现p.__proto__.constructor返回的结果为构造函数本身，p.__proto__.__proto__有很多参数

{b:”b", constructor: f,_ defineGetter_ : f, _ defineSetter_ _ : f, hasOwnl
b: "b"
constructor: f object()
bhasOwnProperty: f hosOwnProperty()
isPrototypeOf: f isPrototype0f()
propertyIsEnumerable: f propertyIsEnumerable()
tolocalestring: ftoLocaleString() !
tostring: f toString()
valueOf: f value0f() 
_ defineGetter_ : f - defineGetter_ ()
_ defineSetter_ : f__ defineSetter__ ()
1ookupGetter_ : f - _LookupGetter_ _()
_ lookupSetter_ : f . -- LookupSetter_ ()
get _ proto_: f- -
_proto__ ()
set
proto_ : f - _proto__ _()

我们调用constructor属性，p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数，Person.prototype的隐式原型的constructor指向Object()，即Person.prototype.__proto__.constructor == Object()

从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype

所以p.b打印结果为b，p没有b属性，会一直通过__proto__向上查找，最后当查找到Object.prototype时找到，最后打印出b，向上查找过程中，得到的是Object.prototype，而不是Function.prototype，找不到a属性，所以结果为undefined，这就是原型链，通过__proto__向上进行查找，最终到null结束

        console.log(p.__proto__.__proto__.__proto__);   //null
        console.log(Object.prototype.__proto__);        //null

大家理解刚才的过程，相信下面这些应该也都明白

        //Function
        function Function(){}
        console.log(Function);  //Function()
        console.log(Function.prototype.constructor);    //Function()
        console.log(Function.prototype.__proto__);      //Object.prototype
        console.log(Function.prototype.__proto__.__proto__);    //NULL
        console.log(Function.prototype.__proto__.constructor);  //Object()
        console.log(Function.prototype.__proto__ === Object.prototype); //true

总结：

1.查找属性，如果本身没有，则会去__proto__中查找，也就是构造函数的显式原型中查找，如果构造函数中也没有该属性，因为构造函数也是对象，也有__proto__，那么会去它的显式原型中查找，一直到null，如果没有则返回undefined

2.p.__proto__.constructor == function Person(){}

3.p.___proto__.__proto__== Object.prototype

4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null

5.通过__proto__形成原型链而非protrotype

最后附上一张图，大家阅读完之后，看图应该可以很容易理解

new关键字的详解：

new 关键字在生成对象时完成了三件事情：

a) 为对象开辟内存空间。

b) 调用类的构造方法。

c) 将生成的对象的地址返回。

this关键字的详解：

在java的学习中，当接触到类这一章的时候，就会避免不了的接触到this关键字。

首先，this关键字指向的是当前对象的引用

作用：

this.属性名称

指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）

class Test_08{
   public static void main(String [] args){
       //调用无参构造函数，
       Person p1 = new Person();
       p1.setAge(20);
       p1.setName("张三");
       p1.setGender("男");
       System.out.println(""+p1.getName()+" 今年"+p1.getAge()+"岁性别为："+p1.getGender());
   }

}
class Person{
   private String name;
   private int age;
   private String gender;
   Person(){}
   Person(String name,int age,String gender){
       this.name = name;
       this.age = age;
       this.gender = gender;
   }
   public void setName(String name){
       name = name;
   }
   public String getName(){
       return name;
   }
   public void setAge(int age){
       age = age;
   }
   public int getAge(){
       return age;
   }
   public void setGender(String gender){
       gender = gender;
   }
   public String getGender(){
       return gender;
   }
}

this.方法名称

用来访问本类的成员方法

this();

访问本类的构造方法

()中可以有参数的如果有参数就是调用指定的有参构造

注意事项:
1.this() 不能使用在普通方法中只能写在构造方法中
2.必须是构造方法中的第一条语句

例如，当我们把this()放在有参构造函数的末尾时，例如用this("哈哈");我们先不管语法是否有错误，试着按照程序的运行来判断一下结果，我们可以看出，当在创建对象时，假定调用含有this（“哈哈”）的构造函数，则刚开始存放的值，会被this（“哈哈”）调用的只含有一个参数的构造函数覆盖，也就是说，最后的name会变成“哈哈”，这是与我们的初衷相违背的，而且运行结果也是报错，

当我们换到构造方法的第一句时，则不会有这种错误，因为它并不会影响到后面name的赋值。

我们接下来把this语句放在构造函数的第一句位置，

就不会有报错

阿博呀呀呀。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入了解JS原型和原型链，new、this关键字详解

深入javascript之原型和原型链原型和原型链是js中的难点也是重点，明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效，并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型，原型链有深刻全面的了解。深入系列：深入javascript之作用域深入系列：深入javascript之执行上下文一，函数对象所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）所有函数拥有pro...
复制链接

扫一扫