欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript 对象

程序员文章站 2022-04-24 23:07:15
...

JS创建对象的几种方法

1. Object 构造函数 创建

Javascript 对象

2. 对象字面量表示法 创建
Javascript 对象
3. 使用工厂模式创建对象
Javascript 对象Javascript 对象
在 Car 函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式

4. 使用构造函数创建对象

构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。Javascript 对象
Javascript 对象
构造函数与工程模式相比:
没有显示地创建对象
直接将属性和方法赋给了this对象
没有return语句
终于可以识别的对象的类型,可以使用instanceof操作符来进行自主检测

构造函数执行流程:
Javascript 对象
构造函数创建对象的缺点:
每个对象里面都有公用的函数,就是每个方法都要在每个实例上重新创建一遍,如果方法的数量很多,就会占用很多不必要的内存。
于是出现了第五种创建对象的方法

5. 原型创建对象模式
Javascript 对象
Javascript 对象
6. 组合使用构造函数模式和原型模式
这种模式是ECMAScript中使用最广泛,认可度最高的一种创建自定义类型的方法,可以说这是用来定义引用类型的一种默认模式
Javascript 对象
Javascript 对象

原型、原型链


原型prototype:在javascript中,每个函数都有一个特殊的属性叫作原型(prototype)。注意函数对象才有prototype属性。prototype属性又指向了一个prototype对象

Javascript 对象
__proto__属性:每个对象(除了null)都拥有这样一个属性,这个属性是一个指针,它指向一个名叫做原型对象的内存堆。而原型对象也是一个对象,因此又含有自己的[[prototype]]属性,又指向下一个原型对象,终点指向我们的Object.prototype对象。
Javascript 对象
Javascript 对象
Javascript 对象
constructor 属性:每个实例对象都从原型中继承了一个constructor属性,存在于每一个function的prototype属性中,这个constructor保存了指向function的一个引用
在 constructor 属性的末尾添加一对圆括号括号中包含所需的参数)实例对象也可以百年城构造器创建另一个对象实例
Javascript 对象
constructor属性不影响任何javascript的内部属性。instanceof检测对象的原型链,通常你是无法修改的。
constructor其实没有什么用,只是javascript语言设计的历史遗留物。

原型链:
1)原型链的最高指向: null
所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。 Object的指针最后指向null
2)实例和原型的关系:
当读取实例的属性时,如果找不到实例的属性,就会查找与对象关联的原型的属性,如果还是查找不到,就查找原型的原型,一直到*为止。这样就构成了一个原型链
3) 原型的原型:
实例出来的var person = new Person()person通过__proto__指向构造函数的原型Person.prototype,然后构造函数的原型指向Object的原型,即是Person.prototype.__proto__指向Object.prototype。

Object.prototype.__proto__ // null

实例讲解:

function Person(name){
	this.name = name;
}
Person.prototype.sayName = function(){
	console.log(this.name);
}

var person = new Person("Lotus");
person.age = 23;
person.sayName(); // Lotus

Javascript 对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            position: relative;
        }
        #myCanvas{
            position: absolute;
            left: 50%;
            top: 50%;
            background: #000;
            margin-left: -300px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="300" style="border: 1px solid #000;">

    </canvas>
	<script type="text/javascript">
		window.onload = function(){
		    var c = document.getElementById('myCanvas');
		
		    var grd = ""; // 渐变的颜色
		
		    // 上下文
		    var context = c.getContext("2d");
		    
		    if(context){
		        // x,y,r 坐标和半径
		        function Star(x,y,r){
		            this.x = x;
		            this.y = y;
		            this.r = r;
		            this.init(this.x,this.y,this.r);
		        }
		        
		        // 绘制星星
		        Star.prototype.init = function(x,y,r){
		        
		        
		            context.beginPath();
		        
		            // 渐变颜色
		            grd = context.createRadialGradient(x,y,r-2,x,y,r+2)
		            grd.addColorStop(0, 'white');
		            grd.addColorStop(1, 'yellow');
		            context.fillStyle=grd;
		        
		            //  画圆
		            context.arc(x,y,r,0,2*Math.PI);
		        
		            // 填充颜色
		            context.fill();
		        
		            context.closePath();
		        }
		        
		        // 创建星星
		        for(var i = 0; i < 200; i++){
		            var x = Math.floor(Math.random()*600);
		            var y = Math.floor(Math.random()*300);
		            var r = Math.floor(Math.random()*3)+2;
		            new Star(x,y,r)
		        }
		    }else{
		        var div = document.createElement("div");
		        div.innerHTML = "您的浏览器不支持canvas,请升级浏览器!";
		        document.getElementsByTagName("body")[0].appendChild(div);
		    }
		}
		
	</script>
</body>
</html>

继承

数字对象


数字对象

)

数字对象

日期对象)

查看原文:
https://juejin.im/post/5b150fcf518825139b18de11#heading-0
https://juejin.im/post/5acf22aef265da238c3b0f78#heading-3