编程知识 cdmana.com

JavaScript object

object (Object)

Objects are separated by curly braces , Inside the brackets , The properties of an object are in the form of name and value pairs (name : value) To define , Also called json.
Attributes are separated by commas , Spaces and breaks don't matter . Declarations can span multiple lines .

Define an object , full name :Keafmd, Age :18 , Address : Beijing ,isEdu:false

Sample code :

var Ke = {
    'name': 'Keafmd',
    'age': 18,
    address: ' Beijing ',
    isEdu:false
}
console.log(Ke)

Complete code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var Ke = {
    
    
			    'name': 'Keafmd',
			    'age': 18,
			    address: ' Beijing ',
			    isEdu:false
			}
			console.log(Ke)
		</script>
	</head>
	<body>
		
	</body>
</html>

Effect screenshots :
 Insert picture description here

Object creation

Use {} establish

var person = {
    name : 'Keafmd',
    sayHi:function(){
        console.log('hi, my name is :'+this.name)
    }
};

Sample code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var person = {
    
    
			    name : 'Keafmd',
			    sayHi:function(){
    
    
			        console.log('hi, my name is :'+this.name)
			    }
			};
			console.log(person) 
			person.sayHi()
		</script>
		<title></title>
	</head>
	<body>
		
	</body>
</html>


Effect screenshots :
 Insert picture description here

Use Object establish

var p = new Object();
p.name = 'Keafmd';
p.age = 18;

console.log(p);

Sample code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var p = new Object();
			p.name = 'Keafmd';
			p.age = 18;
			
			console.log(p);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

Effect screenshots :
 Insert picture description here

Use Function establish

function Student(){
   this.name = '';
    this.age = 0;
}

var stu1 = new Student();
stu1.name = "Keafmd";
stu1.age = 18;
stu1.address = ' Harbin ';

console.log(stu1);

var stu2 = new Student();
console.log(stu2);

Sample code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function Student(){
    
    
			    this.name = '';
			    this.age = 0;
			}
			
			var stu1 = new Student();
			stu1.name = "Keafmd";
			stu1.age = 18;
			stu1.address = ' Harbin ';
			
			console.log(stu1);
			
			var stu2 = new Student();
			console.log(stu2);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

Effect screenshots :

 Insert picture description here

Use class keyword

class Human{
   constructor(name) {
        this.name = name;
    }

    sayHi(){
        console.log(' I am a : '+this.name);
    }

}

var  h1 = new Human('Keafmd');
h1.sayHi()

Sample code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			class Human{
    
    
			    constructor(name) {
    
    
			    this.name = name;
			    }
			
			    sayHi(){
    
    
			        console.log(' I am a : '+this.name);
			    }
			
			}
			
			var  h1 = new Human('Keafmd');
			h1.sayHi()
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

Effect screenshots :
 Insert picture description here

Prototype model of the object

You can extend fields to objects through objects ( attribute 、 Method )
If you want the same type , Add attributes to both , You need prototypes prototype

Sample code :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function Student(){
    
    
                this.name = '';
                this.age = 0;
            }

            var  s1 = new Student();

            // Extending methods to objects 
            // s1.sayHi =function(){
    
    
            //     console.log(' Say hello ')
            // }

            // Extend the prototype 
            Student.prototype.sayHi = function(){
    
    
                console.log(' Say hello ')
            }

            s1.sayHi();


            var  s2 = new Student();
            s2.sayHi();
        </script>
    </head>
    <body>
    </body>
</html>

Effect screenshots :
 Insert picture description here
Writing is not easy to , After reading it, if it helps you , Thank you for your support !
If you're on the computer side , See... In the lower right corner “ One key, three links ” Did you? , That's right. Point it [ ha-ha ]

 Insert picture description here


come on. !

Joint efforts !

Keafmd

版权声明
本文为[osc u*vsn7cspo]所创,转载请带上原文链接,感谢

Scroll to Top