第198天:js---内置对象的原型链和其他知识

简介: 一、内置对象的原型链1、Object原型 1 function test() {} 2 alert(test.toString()); 3 4 //新增属性 5 Object.

一、内置对象的原型链

1、Object原型

 1 function test() {}
 2    alert(test.toString());
 3    
 4    //新增属性
 5    Object.prototype.mytest = function() {
 6        alert("123");
 7    }
 8    var o = new Object();
 9    o.mytest();
10    
11    //重写属性
12     Object.prototype.toString = function()
13    {
14        alert("破坏之王");
15    }
16    o.toString();

2、Object对象是Function对象的实例

 1 /*object的__proto__指向Function对象的原型*/
 2     //Object对象是Function对象的一个实例
 3     console.log(Object.__proto__ === Function.prototype);//true
 4 
 5     /*Function.prototype对象的原型的__proto__属性指向Object.prototype*/
 6     console.log(Function.prototype.__proto__ === Object.prototype)
 7 
 8     /*object的原型的__proto__属性为null*/
 9     console.log(Object.prototype.__proto__ )
10 
11 
12     /*总结*/
13     /*一个自定义对象可以访问到Function对象的所有属性和方法,也可以访问到Object对象的所有属性和方法*/

3、内置对象的实例指向

 1 //Object对象是Function对象的一个实例
 2    //Object对象的__proto__指向Function的原型
 3    console.log(Object.__proto__===Function.prototype);//true
 4 
 5    console.log(Object.prototype.__proto__);//null
 6 
 7    console.log(Function.prototype.__proto__===Object);//false
 8    console.log(Function.prototype.__proto__===Object.prototype);//true
 9 
10    //内置对象的_proto_的指向
11    console.log(Number.__proto__ ===Function.prototype);//true
12    console.log(Boolean.__proto__ ===Function.prototype);//true
13    console.log(String.__proto__ ===Function.prototype);//true
14    console.log(Object.__proto__ ===Function.prototype);//true
15    console.log(Function.__proto__ ===Function.prototype);//true
16    console.log(RegExp.__proto__ ===Function.prototype);//true
17    console.log(Error.__proto__ ===Function.prototype);//true
18    console.log(Date.__proto__ ===Function.prototype);//true
19 
20 
21    //自定义对象的原型的__proto__指向
22    function Product(){};
23 
24    Product.prototype={};
25 
26    var iphone=new Product();
27    console.log(Product.prototype.__proto__);//object
28    console.log(Product.prototype.__proto__===Object.prototype);//true
29 
30    //构造函数就是一个函数,函数都是由Function实现的,都是它的一个实例
31    console.log(Product.__proto__===Function.prototype);//true
32 
33    var obj = new Object();
34    //toString是object的方法,因为在原型中,所以所有对象都可以访问
35    //Object.prototype.toString=function(){};
36    console.log(obj.toString());//[object Object]
37 
38    /*object的实例指向Object的原型对象*/
39    console.log(obj.__proto__ === Object.prototype);//true

4、自定义对象的原型链

 1 //object的__proto__指向的是Function.prototype
 2     console.log(Object.__proto__ ===Function.prototype)
 3 
 4 
 5     /*null*/
 6     console.log(Object.prototype.__proto__);
 7 
 8 
 9     /*object*/
10     console.log(Function.prototype.__proto__ === Object) //false
11     console.log(Function.prototype.__proto__ === Object.prototype)  //ture
12 
13 
14     /*内置对象的__proto__指向*/
15     console.log(Number.__proto__ === Function.prototype)  // true
16     /*
17     Boolean.__proto__ === Function.prototype // true
18     String.__proto__ === Function.prototype  // true
19     Object.__proto__ === Function.prototype  // true
20     Function.__proto__ === Function.prototype //true
21     Array.__proto__ === Function.prototype   // true
22     RegExp.__proto__ === Function.prototype  // true
23     Error.__proto__ === Function.prototype   // true
24     Date.__proto__ === Function.prototype    // true*/
25 
26 
27     /*自定义对象的原型的__proto__指向*/
28     function Product(){}
29 
30     Product.prototype={}
31 
32     var iphone = new Product()
33 
34     console.log(Product.prototype.__proto__)
35     console.log(Product.prototype.__proto__ === Object)  //false
36     console.log(Product.prototype.__proto__ === Object.prototype) //true
37 
38     var obj = new Object()
39 
40    /* Object.prototype.toString=function(){
41         alert('破坏之王')
42     }*/
43 
44     console.log(obj.toString())
45     /*构造函数其实就是一个函数
46     函数都是Function实现的。都是它的一个实例*/
47 
48    /* Function
49     Function.prototype
50     Object
51     Object.prototype*/
52 
53     console.log(Product.__proto__ ===Function.prototype);
54 
55     console.log(Array.prototype.__proto__  === Object.prototype );

二、其他知识

1、hasOwnproperty

 1 var person= function(){
 2          age=1
 3       };
 4   
 5   person.prototype={
 6          name:'wangshukui'
 7       };
 8 
 9 
10 var xiaowang = new person();
11 //实例化之后 重新分配内存 系统会自动屏蔽原型同名 -- 原理 开辟新的空间
12 
13   //
14  alert(xiaowang.hasOwnProperty("name"));//false --表明是原型属性
15 
16  alert(xiaowang.hasOwnProperty("age")); //false --类属性
17  
18  
19  //当定义一个实例化属性之后,会自动屏蔽原型属性
20  xiaowang.name='小李';
21  alert(xiaowang.hasOwnProperty('name')) //true
22  
23  xiaowang.sex='nan';
24   alert(xiaowang.hasOwnProperty('sex')) //true

2、isPrototypeOf

判断iphone是否拥有Product的原型属性

 1 function Product(){
 2         this.name='iphone8';
 3         this.description='手机中的战斗机';
 4         this.price=7777;
 5         this.date=new Date();
 6         this.add = function(){};
 7     }
 8 
 9     Product.prototype={
10         test:11111,
11         buy:function(){}
12     }
13     var iphone = new Product()
14     console.log(Product.prototype.isPrototypeOf(iphone));//true

3、constructor 查看对象的构造函数

 1 //constructor : 查看对象的构造函数
 2 
 3         /*function Aaa(){
 4          }
 5 
 6          var a1 = new Aaa();
 7 
 8          alert( a1.constructor );  //Aaa
 9 
10          var arr = [];
11          alert( arr.constructor == Array );  //true*/
12 
13 
14         /*function Aaa(){
15          }
16          //Aaa.prototype.constructor = Aaa;   //每一个函数都会有的,都是自动生成的
17 
18          //Aaa.prototype.constructor = Array;
19 
20          var a1 = new Aaa();
21          alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/
22 
23 
24         /*function Aaa(){
25          }
26 
27          Aaa.prototype.name = '小明';
28          Aaa.prototype.age = 20;
29 
30          Aaa.prototype = {
31          constructor : Aaa,
32          name : '小明',
33          age : 20
34          };
35 
36          var a1 = new Aaa();
37          alert( a1.constructor );*/
38 
39 
40         function Aaa(){
41         }
42 
43         Aaa.prototype.name = 10;
44         Aaa.prototype.constructor = Aaa;
45 
46         for( var attr in Aaa.prototype ){
47             alert(attr);
48         }

4、instanceof : 对象与构造函数在原型链上是否有关系

 1 //instanceof : 对象与构造函数在原型链上是否有关系
 2 
 3         function Aaa(){
 4         }
 5 
 6         var a1 = new Aaa();
 7 
 8         //alert( a1 instanceof Object );  //true
 9 
10 
11         var arr = [];
12 
13         alert( arr instanceof Array );//true

5、静态属性、原型属性和实例属性

 1  //对象构造函数
 2     function Atest(name){
 3         //私有属性,只能在对象构造函数内部使用
 4         var className = "Atest";
 5         //公有属性,在对象实例化后调用
 6         this.name = name;
 7         //对象方法
 8         this.hello = function(){
 9             alert(this.name);
10             alert(this.msg());//使用原型方法扩充的方法可以在类内部使用
11             alert(this.sex);//使用原型方法扩充的属性可以在类内部使用
12             alert(Atest.age);//静态属性调用时格式为[对象.静态属性]
13         }
14     }
15     //类方法 (实际是静态方法直接调用) 位置:Person类的外部 语法格式:类名称.方法名称 = function([参数...]){ 语句行; }
16     Atest.Run = function(){
17         alert("我是类方法 Run");
18     }
19 
20 
21     //原型方法
22     Atest.prototype.msg = function(){
23         alert("我的名字是:"+this.name);//如果原型方法当作静态方法直接调用时,this.name无法被调用
24     }
25 
26     //公有静态属性 在类的外部
27     Atest.age = 20;//公有静态属性不能使用 【this.属性】,只能使用 【对象.属性】 调用
28 
29     //原型属性,当作是类内部的属性使用【this.原型属性】,也可以当成公有静态属性使用【对象.prototype.原型属性】
30     Atest.prototype.sex = "男";
31 
32     Atest.Run(); //类方法也是静态方法,可以直接使用 【对象.静态方法()】
33     Atest.prototype.msg();//原型方法当成静态方法使用时【对象.prototype.方法()】
34     alert(Atest.prototype.sex);//原型属性当作静态属性使用时【对象.prototype.方法()】
35     var a = new Atest("zhangsan");//对象方法和原型方法需要实例化对象后才可以使用
36     a.hello();//对象方法必须实例化对象
37     a.msg();//原型方法必须实例化对象
38     alert(a.age)://错误,公有静态属性只能使用 【对象.属性】调用
39 
40     //ps:尽量将方法定义为原型方法,原型方法避免了每次调用构造函数时对属性或方法的构造,节省空间,创建对象快.

 

相关文章
|
6月前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
1月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
12天前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
12天前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
14天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
24天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
28 1
|
1月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
24 0
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
29 0
|
1月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
27 0
|
3月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
100 0