js一些杂乱理解

pikazo

已于 2024-08-16 10:14:22 修改

阅读量346

点赞数 4

于 2024-08-16 09:29:27 首次发布

本文链接：https://blog.csdn.net/wuqing2012mxd/article/details/141224523

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js 的值类型和引用类型

引用类型:object,array,function
值类型:诸如number,stringboolean,null,Undefined,Symbol

js使用变量访问对象属性示例

var myDog = "Hunter";
var dogs = {
Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
}
var breed = dogs[myDog];
console.log(breed)// "Doberman"

object.assign 潜复制对象

仅仅只是潜复制,对于,对象里面的对象,无法复制,只会覆盖,jq中的$.extend是如果第一个参数是true,可以达到深复制的效果.请查看我的jq理解

        var target={name:'guxin',age:18}
        var source1={state:'signle',age:22}
        var source2={mood:'happy',age:25}
        var result=Object.assign(target,source1,source2)
        console.log(target)//{name: 'guxin', age: 25, state: 'signle', mood: 'happy'}

this指向还有this指向改变方法(call,apply,bind)

 var Person = {
        name:"lixue",
        age:21
    }
    function fn(x,y){
        console.log(x+","+y);
        console.log(this);
        console.log(this.name);
        console.log(this.age);
    }
    //this对象改成Person了,原本是window
    fn.call(Person,"hh",20);//执行fn
    fn.apply(Person,["hh",20]);//执行fn
    fn.bind(Person,"hh",20)();//bind只绑定不执行

prototype原型和proto

定义

原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。

函数的原型对象

在这里插入图片描述

<body>
    <script type="text/javascript">
	    function Person () {    	
	    }
	    
	    alert(Person.prototype.constructor === Person);	// true
	    
      	// 可以使用Person.prototype 直接访问到原型对象
	    //给Person函数的原型对象中添加一个属性 name并且值是 "张三"
	    Person.prototype.name = "张三";
	    Person.prototype.age = 20;
	    //上面直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
        alert(Person.prototype.constructor === Person); //false
        //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
        	/*
  	Person.prototype = {
      	constructor : Person	//让constructor重新指向Person函数
  	}
  	*/
	   	
	   	var p1 = new Person();
	   	//使用instanceof 操作符可以判断一个对象的类型。  
  	//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
	    alert(p1 instanceof Person);	// true
                        
	   	/*
	   		访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
	   		p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
	   		就值。
	   		注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
	   	*/
	   	alert(p1.name);  // 张三

	   	var p2 = new Person();
	   	alert(p2.name);  // 张三  都是从原型中找到的，所以一样。

	   	alert(p1.name === p2.name);  // true

	   	// 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
	   	//原型中的属性。
	   	p1.name = "李四";
	   	alert("p1：" + p1.name);
	   	// 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。	
	   	alert("p2:" + p2.name);  // 张三  
    </script>
</body>

原型和call,apply,bind这些方法,带来的最终继承方案

利用call等来继承属性,用原型来继承方法

<script type="text/javascript">
  	//定义父类型的构造函数
	function Father (name,age) {
		// 属性放在构造函数内部
		this.name = name;
		this.age = age;
		// 方法定义在原型中
		if((typeof Father.prototype.eat) != "function"){
			Father.prototype.eat = function () {
				alert(this.name + " 在吃东西");
			}
		}  

	}
  	// 定义子类类型的构造函数
	function Son(name, age, sex){
      	//借调父类型的构造函数，相当于把父类型中的属性添加到了未来的子类型的对象中
		Father.call(this, name, age);
		this.sex = sex;
	}
  	//修改子类型的原型。这样就可以继承父类型中的方法了。
	Son.prototype = new Father(	);
	var son1 = new Son("志玲", 30, "女");
	alert(son1.name);
	alert(son1.sex);
	alert(son1.age);
	son1.eat();
</script>